Question

HTML：

<button type="button" id="btn1">Button 1</button>
<div id="result">

</div>
<div id="message">

</div>

JS：

$("#btn1").click(function() {
        $("#result").html('<button type="button" id="btn2">Button 2</button>');
    });
    $("#btn2").click(function() {
        $("#message").text('Hello World !');
    });

单击按钮1时，将显示按钮2。但是单击按钮2，不显示消息。

Answer 1

如果按钮存在，您只能附加活动。试试这个：

$("#btn1").click(function() {
    $("#result").html('<button type="button" id="btn2">Button 2</button>');
    $("#btn2").click(function() {
        $("#message").text('Hello World !');
    });
});

Answer 2

页面加载时，您的按钮（#btn2）不存在于DOM中。只需将其更改为：

$(document).on('click', '#btn2', function(){
    $("#message").text('Hello World !');
});

JSFiddle Demo

Answer 3

您可以使用$.on()进行委派：

$("#btn1").click(function() {
    $("#result").html('<button type="button" id="btn2">Button 2</button>');
});

$('#result').on('click', "#btn2", function() {
    $("#message").text('Hello World !');
});

http://jsfiddle.net/7sgT3/1/

Answer 4

因为当你使用jquery来查找btn2时，它还没有存在。您需要在创建实际按钮后立即注册单击处理程序。

为什么我的jquery onclick处理程序无法使用动态添加的内容？

4 个答案: