javascript - 如何对通过模板生成的按钮使用 onclick 事件？

Question

测试underscore.js。使用它的模板引擎。问题是，我无法使用jquery.AJAX从模板中绘制按钮时编写的点击监听器。这里的代码：

<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>


<div id="HelloWorld">
    <h1>Hi There</h1>
    <a href="" id="helloThere">Say Hello</a>
    <div id="helloDiv"></div>
</div>

<script>
    $('a#helloThere').click(function(event){
        event.preventDefault();
        var name='rickesh';
        var templateData=$('#sayHello').text();
        var compiled=_.template(templateData,{'data':name});
        $('#helloDiv').html(compiled);
    });

    $('button#helloAgain').click(function(event){
        event.preventDefault();
        alert('hello again bro!!!');
    });
</script>

<script type="text/html" id="sayHello">
    Hello <%= data%> <br />
    <button id="helloAgain">Say Hello Again</button>
</script>

现在，在上面的代码中，当我单击 SAY HELLO链接<a href="" id="helloThere">Say Hello</a>时，模板已成功绘制并显示Hello rickesh一个按钮。但是当我点击按钮时，什么也没有发生。我是否错误地使用了监听器？我希望在按钮单击时执行一个操作。请指教。

Answer 1

使用委托.on()：

$(function(){
    $(document).on('click','#helloAgain',function(event){
        event.preventDefault();
        alert('hello again bro!!!');
    });
});

Answer 2

我认为您应该在创建 html 元素后创建事件侦听器，可能是这样的：

$('a#helloThere').click(function(event){
    event.preventDefault();
    var name='rickesh';
    var templateData=$('#sayHello').text();
    var compiled=_.template(templateData,{'data':name});
    $('#helloDiv').html(compiled);

    $('button#helloAgain').click(function(event){
        event.preventDefault();
        alert('hello again bro!!!');
    });

});