Click事件

Question

可能重複：
Dynamically Adding Elements and trying to use the selectors .click event Jquery

$(function(){ 
    $('a.bar').click(function(){ 
    // do something 
    }); 

    $('a.foo').click(function(){ 
    $('#toto').append('<a class="bar">bar</a>'); 
    }); 
}); 


<a class="foo">foo</a> 
<div id="toto"></div> 

如何自動附上準備DOM元素的JQuery的定義click事件這是由其他事件添加的（例如通過點擊a.foo獲得a.bar）？

Answer 1

你需要的是委派的事件技術..見下面使用.on

$(document).on('click', 'a.bar', function(){ 
    // do something 
}); 

Answer 2

你可以做一個init()功能，您可以設置所有觸發器和DOM修改後調用它。例如： -

$(function() { 
    init(); 

    $('a.foo').click(function(){ 
    $('#toto').append('<a class="bar">bar</a>'); 
    init(); 
    }); 
}); 

function init() { 
    $('a.bar').click(function(){ 
    // do something 
    }); 
} 

Answer 3

$(document).ready(function(){ 
    $('.foo').click(function(){ 
    $('<a class="bar">bar</a>').appendTo('#toto'); 
    }); 

    $('#toto').delegate('.bar', 'click', function(a){ 
    $('.foo').toggle();  
    }); 
}); 

使用委託。