0

I am really new to jQuery and facing a problem here. I have a html container element and want dynamically add elements in that container. Every element has a close/remove button in the right corner. On click of that button the element should be removed.

At the moment I trigger a function which adds the button styling and the click event handler to the remove button of the element everytime an element is added to the container.

jQuery( ".closeButton" ).button({
icons: {primary: "ui-icon"},
text: false }).click(function() { Click Event here ... });

This works at the moment, but I thought I found a more comfortable solution with the .on() function I read here: In jQuery, how to attach events to dynamic html elements?

With 

$('container').on('click', '.closeButton', function() {
    //remove element
});

I can add the click element to that button, but I want to add the jQuery UI Button Styles, too. I mean: 

icons: {primary: "ui-icon"},
text: false

Is it possible with .on() method to do so?

Community
  • 1
  • 1
Rei
  • 11
  • 3
  • As far as I know, it isn't possible to do property delegation like you would with event delegation. You would have to listen for like a "onCreate" event or something, which is not defined and would take a lot to implement if you are new to jQuery. My suggestion would be to just call the .button() method with the properties you have defined on each new button when it gets created. – mhodges Mar 25 '16 at 21:43
  • 1
    Thank you. Yes I meant it like you described it. Okey I thought before there isnt an easy way to do so, so I will left it as it is. Thank you for your answer. – Rei Mar 25 '16 at 21:51
  • Are the HTML elements created dynamically? OR are they in the DOM already? Either way you can assign the button widget to each if you wanted. – Twisty Mar 29 '16 at 15:29

0 Answers0