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