Question

I noticed that some jQuery buttons inside a container don’t work when they are loaded after the initial page load has finished.

For example, see this

Those buttons on the bottom: today, tomorrow, some other day
work, but only at the beginning.

When you press a navigation button at the top, such as venues, and then click on events again, those buttons will no longer work. Neither do the buttons on the search page.

Here is the code I have, for example:

<a id="today_button" href="#" title="Click to show events for today"></a>



jQuery('#today_button').click(function() {   
    jQuery("#today_button").addClass("active");
    jQuery("#tomorrow_button").removeClass("active");
    jQuery("#some_other_day_button").removeClass("active");
});

Also, the choose buttons:

<a id="choose_button" href="#" title="Click to search for club events!"></a>

jQuery('#choose_button').click(function() {   

    $('#whole-ajax-content-one').load('search2.html');

});

Thanks everybody! 🙂

Answer 1

dynamically added elements needs to be re-binded to the events

use live (deprecated)

$('#choose_button').live('click', function() { ...  });

or delegate

$(document).delegate("#choose_button","click",function(){...});

or on (1.7+)

$(document).on("click","#choose_button",function(){...});