jQuery functions not affect on appeneded elements

Question

jQuery functions not affect on appeneded elements after ajax

I know there are two ways for thats

but evey way not the best

frist when I appened element I append jquery functions again that mean evey append element I will appened the functions may be that is not best

second use .live("click" instead of .on("click"

but I know .live works with old jQuery version

What is the best way to jquery functions work with elements will appended in the future

Answer 1

You can delegate the event handling to a container to where items are appended. The full details of this technique are outlined in the jQuery documentation: Understanding Event Delegation

Instead of:

// Attach a directly bound event handler
$( "#list a" ).on( "click", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});

you'd do

// Attach a delegated event handler
$( "#list" ).on( "click", "a", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});