[SalesForce] Lightning OnClick Not Working Within aura:iteration

I've been unable to get onclick actions to work in my organization when the onclick element is within an html <aura:iteration> tag. The onclick action works when I put the <a> tag or <lightning:button> outside of the <aura:iteration>, it works within a lightningstrike.io datagrid table, and it's working in other organizations I'm working with. How can I get the onclick to fire?

<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--fixed-layout slds-m-bottom_x-small">
    <thead>
        <tr class="slds-text-heading--label">
            <th scope="col"><div class="slds-truncate" title="Action"></div></th>
        </tr>
    </thead>
    <tbody>
        <aura:iteration items="{!v.stageList}" var="c">
            <tr>
                <td>
                    <lightning:buttonIcon name="{!c.Key}" iconName="utility:delete" alternativeText="Remove" onclick="{!c.removeFromStaging}"/>
                </td>
            </tr>
        </aura:iteration>
    </tbody>
</table>

removeFromStaging : function(component, event, helper) {
    var key = event.getSource().get("v.name");
    var stageList = component.get("v.stageList");
    var updatedStageList = stageList.filter(function (s) {
        return s.Key != key;
    }
    component.set("v.stageList", updatedStageList);
}

–UPDATE–
The issue was that Lightning was not liking my var of c in the aura:iteration tag and changing it to something else (I changed it to s) solved the issue. Must be that Lightning was evaluating c.removeFromStaging as a property of the iteration variable and not a controller method (which makes total sense and a reason to never use v or c as variables in your Lightning Component).

Best Answer

Please try below and see    
<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--fixed-layout slds-m-bottom_x-small">
   <thead>
      <tr class="slds-text-heading--label">
         <th scope="col">
            <div class="slds-truncate" title="Action"></div>
         </th>
      </tr>
   </thead>
   <tbody>
      <aura:iteration items="{!v.stageList}" var="c" indexVar="i">
         <tr>
            <td>
               <a onclick="{!c.removeFromStaging}" data-index="{!i}">
                  <lightning:buttonIcon name="{!c.Key}" iconName="utility:delete" alternativeText="Remove" />
               </a>
            </td>
         </tr>
      </aura:iteration>
   </tbody>
</table>
removeFromStaging : function(component, event, helper) {
var target = event.target;
var dataEle = target.getAttribute("data-Index"); // which one is clicked
var allElement = component.get("v.stageList");
for(var i=0; i<allElement.length;i++){
if(i == dataEle){
// selected Item
   var group = component.get("v.stageList");
    group.splice(i, 1); 
    component.set("v.stageList", group);
}
}
}
Related Topic