I'm creating some HTML elements in a helper function, and dynamically appending them to the DOM. There is no problem in this step. The only problem I can't solve is the creation of the onlick attribute : I need it to be connected to a controller function. I have tried 2 methods:

1st method

I simply redirect the onclick event to the controller function I need. See LIMITATION to understand why this doesn't work in my situation.

var div = document.createElement('div');
div.onclick = component.getReference('c.onClickFunction');

2nd method

I created a static hidden button inside the DOM as follows :

<button class='slds-hide' onclick='{!c.onClickFunction}'/>

Then, I linked the dynamically created elements to this button to trigger its onclick event

var div = document.createElement('div');
div.onclick = function(){
    var x = document.getElementById('onPrsClickButton');
    x.value = this.id;

LIMITATION : I'm working on an previous developer code and this is his implementation that creates these dynamic HTML elements as Strings and then leaving them to the Leaflet API. So, I must cast to String the HTML objects I just created with div.outerHTML, but in this case I loose the onclick link I just created... I can't see another solution, I hope you can help me :-)

Your Answer

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

Browse other questions tagged or ask your own question.