0

In my plugin some elements will close the sidebar. For example if in a sidebar there is a list:

<ul>
    <li>element 1</li>
    <li>element 2</li>
    <li>element 3</li>
</ul>

li elements will trigger the closing animation. My issue is that if some elements are loaded asynchronously, the plugin won't "see" those elements and the animation won't be triggered. It's not just AJAX I'm talking about all elements loaded dynamically!

The code is really simple and here there is an example:

var $elements = 'li';

$elements.click(function() {
    $sidebar.animate({
        //animation
    });
});

How can I make those elements visible to the plugin?

Here the complete code https://github.com/dcdeiv/simple-sidebar/blob/master/jquery.simplesidebar.js

Gone Coding
  • 88,305
  • 23
  • 172
  • 188
dcdeiv
  • 670
  • 2
  • 10
  • 23
  • 1
    Possible dup http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Satpal Aug 04 '14 at 15:46
  • Most plugins either 1) use delegated events, so will just work, or 2) they have a `refresh` option you call (which this addin doesn't appear to have), or 3) you have to rerun them (sometimes after cleaning up the initial reformatting they can make) or 4) it will never work and needs re-writing. – Gone Coding Aug 04 '14 at 15:48

2 Answers2

1

Dynamic elements don't trigger the callback, because there are no event listeners bound to those dynamic elements.
If you want to handle events to elements that don't exist yet, or using a selector that will select elements that are added dynamically, you should delegate the event:

$(document).on('click', 'li', function()
{
    //handle
});

This code binds a click listener on the document itself, and the callback will be invoked for every click that is registered, provided that li element is a child of the element on which the listener is bound. For example:

<div id='foo'>
    <div id='bar'>
        <span> test</span>
    </div>
    <span> test2</span>
</div>

Consider this code:

var outer = $('#foo');
$('#bar').on('click', 'span', function()
{
    outer.append($('<span>Added</span>'));
});

This will add spans to the foo div every time the span inside the bar element is clicked. It will not be invoked when you click spans that aren't children of the <div id='bar'>
This code, however:

$('#foo').on('click', 'span', function()
{
    console.log(this);
});

will react to clicks on all spans inside the <div id='foo'> element. Dynamic and static alike, even the span inside the bar div.

Basic rule-of-thumb: read these snippets like so:

$(document).on('click',   'div',    function(){});
  <scope>     <event>  <selector>   <callback>
on event in <scope> for elements matching <selector>, apply <callback>
Elias Van Ootegem
  • 67,812
  • 9
  • 101
  • 138
-1

You can bind the element after it is rendered on the page.
Use jquery bind function.

paragm
  • 54
  • 6