0

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).

  • try putting your onclick in the surrounding td – Caspar Harmer Apr 19 '18 at 23:39
  • Thanks for the suggestion, @caspar. I solved my issue and updated my answer above (using c as the iteration variable was the culprit). – bluehrs Apr 22 '18 at 0:19
0
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);
}
}
}
  • please check where from index start in aura 0 or 1 and accordingly fix if block – Avijit Chakraborty Apr 20 '18 at 2:09
  • Please don't include part of your answer in the comments. – sfdcfox Apr 20 '18 at 2:56
  • Thanks for the suggestion, @avijit. I solved my issue and updated my answer above (using c as the iteration variable was the culprit). – bluehrs Apr 22 '18 at 0:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.