Adding onclick to dynamically created button

Question

I have a component that dynamically creates buttons which, when clicked, apply filters and then re-query the back end for data.

While I can assign onclick events to each button, I can't find a way to call a helper function.

I have only had success in using pure Javascript to assign

myButton.onclick = function(){alert('this works');};

but the code needs to pass parameters to the back end and then process and display the results in the DOM, so I really need to be able to call a helper function.

I saw an article saying someone was able to call a helper function, but this doesn't work when onclick is assigned dynamically. I have tried helper.functionToCall(cmp), this.functionToCall(cmp), this.helper.functionToCall(cmp), functionToCall(cmp) and many other things.

Is there a way to do this?

Answer 1

I just did something like this the other day. Not sure if it meets all your needs but it at least illustrates the concept

Component Controller

({
doinit: function(component,event,helper){
    <iframe name="pc-frame" src="{!v.iframe-url}" style="width: 100%;height: 770px; border: none;" scrolling="true"/>

        $A.createComponent(
            "aura:html",
             { 
                 tag: "iframe",
                 HTMLAttributes:{
                     "id": "pc-frame",
                     "src": tmp, 
                     "scrolling" : "true",
                     "onload" : component.getReference("c.handlerFunction") //You can change to onclick if your html element supports it 
                 },
             }
                function(compo){
                    var container = component.find("container");
                    if (container.isValid()) {
                        var body = container.get("v.body");
                        body.push(compo);
                        container.set("v.body", body);
                    }
                }
        );

},

handlerFunction : function(component, event,helper){

    console.log('something');

}

)}

Answer 2

I would really hope there is a better way, but in the absence of any apparent SF solution, I implemented a JS hack -

I put a hidden button on the form so it existed in the component at the time of load, and had onclick code which invoked a defined controller function.

<input type="button" class="hide" id="topicId" value="" onclick="{! c.getCategories }" />

Then I added onclick functions to each of the buttons that need to call the helper function:

button.onclick = function(){var x = document.getElementById('topicId'); x.value=this.id;x.click();};

Upon clicking, the controller function retrieves the (string) parameter from the button's value and passes it the helper function:

    getCategories : function(cmp, event, helper){
        var topicId = document.getElementById("topicId");
        helper.getFilteredCategories(topicId);
    },

I'm really not proud of this, but it works. Any cleaner suggestions would be appreciated.