In JQuery, I cannot add event-handlers to newly appended
in a

Question

I am trying to add event handlers inside a new custom "dropdown" element. ( created using 'new' keyword.)

The custom dropdown element's html uses goes somewhat like this:

<div class='special-dd'><span class='placeholder'></span>
  <ul>
    <li><a>option1</a></li>
    <li><a>option2</a></li>
    <li><a>option3</a></li>
  </ul>
</div>

It uses custom JS to make it work like a normal dropdown.

This works fine in normal cases, but does not seem to work when I update the the dropdown's <ul>, using jQuery's empty and append. ( new <li>s )

The eventHandler should trigger an alert when clicked. So far I have narrowed down the problem to the <ul>'s jQuery object having empty property values of the new <li>s, but length property is correct.

Any further help would be greatly appreciated!

Here is the main part of the code:

atomUL.append(options_HTML); 
testObj("atomUL", atomUL);

atomUL : jQuery object of the <ul>
options_HTML : the string containing the 3 <li> tags.
testObj: Outputs object in the console.

Console output:

{
     "0": {},
     "1": {},
     "2": {},
     "length": 3,
     "prevObject": {
          "0": {
               "jQuery1112017214052332565188": 8
          },
          "length": 1,
          "context": {
               "jQuery1112017214052332565188": 70,
               "location": {
                    "hash": "",
                    "search": "",
                    "pathname": "/index.php/tests/forms-ui-test/",
                    "port": "",
                    "hostname": "elementary.local",
                    "host": "elementary.local",
                    "protocol": "http:",
                    "origin": "http://elementary.local",
                    "href": "http://elementary.local/index.php/tests/forms-ui-test/",
                    "ancestorOrigins": {}
               }
          },
          "selector": "#fields"
     },
     "context": {
          "jQuery1112017214052332565188": 70,
          "location": {
               "hash": "",
               "search": "",
               "pathname": "/index.php/tests/forms-ui-test/",
               "port": "",
               "hostname": "elementary.local",
               "host": "elementary.local",
               "protocol": "http:",
               "origin": "http://elementary.local",
               "href": "http://elementary.local/index.php/tests/forms-ui-test/",
               "ancestorOrigins": {}
          }
     },
     "selector": "#fields ul.dropdown > li"
}

Notice: the keys 0, 1, 2 are empty even after appending the li.

You haven't shown how you've attempted to bind to the events, but it sounds like you should be using delegated event handlers, eg. `$parent.on('click', 'child.selector', fn)` — Rory McCrossan, Oct 26 '15 at 14:30
My guess is this will be a dupe of http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — epascarello, Oct 26 '15 at 14:31

score 0 · Accepted Answer · answered Oct 26 '15 at 15:06

I'm not positive without seeing how you're handling those click events in your jQuery, but it sounds like you haven't bound the event to an existing parent element.

Having something like...

$("li").click(function() {
  // do something
});

...will work for any "li" that already exist on page load, since that's when the click event is being bound. But, when you add elements through jQuery AFTER page load, they won't have those same bindings. So, what you can do is bind to an existing element and delegate to its descendants.

Something like...

$("body").on("click", "li", function() {
  // do something
});

...would work on any "li" that is a descendant of the "body".

Thanks so much! That really helped. Just so you know, here is how I added the click handlers 'code': this.eventHandlers = function(){ opts.on('click', function(){ // some code here.... }); the opts was the jQuery object of all

In JQuery, I cannot add event-handlers to newly appended in a

1 Answers1

In JQuery, I cannot add event-handlers to newly appended
in a