Question

我使用jQuery将动态内容添加到php页面。我添加内容没有问题，我似乎无法找到让新内容响应点击事件的方法。

例如（我在这里使用div但可以是按钮或其他类型）。

$("#oldstuff").after('<div id="newstuff">Some content that should respond to click event</div>');

编辑：我目前正在使用jquery 1.9.1，我使用的是1.6.2，但我正在查看需要更新的jquery版本的magnific-popup。

我没有发布失败的尝试（

 $("#newstuff").click(function() {...
 $("#newstuff").live('click', function() {...
 binding the click event, etc.

因为我认为我缺少一些基本的东西，一个更有经验的jQuery用户会发现没有破坏代码的噪音。

Answer 1

您可以在将元素插入DOM之前附加点击事件：

$('<div id="newstuff">...</div>').click(function(){ //do something }).insertAfter('#oldstuff');

Answer 2

似乎找不到让新内容响应点击事件的方法。

你必须event delegation

$("#oldstuff").on("click", '#newstuff',function(){
alert( $(this).text() );
});

Answer 3

您需要将事件附加到父元素。

HTML：

<div id="parent">
    <div class="thediv">Hello</div>
</div>

JavaScript的：

function addDiv() {
    var div = document.createElement('div');
    div.className = 'thediv';
    document.getElementById('parent').appendChild(div);
}

$('#parent').on('click', '.thediv', function() {
    // ...
});

看看这项技术是否有效。

Answer 4

在附加DOM之前你可能是绑定事件，并且在最新版本的jquery库中也不推荐使用live方法，所以在附加DOM之后尝试绑定click，或者你可以使用下面的代码......

首先添加DOM。

    $("#oldstuff").after('<div id="newstuff">Some content that should respond to click event</div>');

然后绑定事件。

    $('#newstuff').on('click',function(){alert('do your stuff!')});

或者

    $('#newstuff').click(function(){alert('do your stuff!')});

Answer 5

试试这个

$("#yourElementId").live("click",function(){
  alert( $(this).text() );
 });

在加载dom或动态创建的元素

后，.click无法正常工作

如何动态添加内容可点击？

5 个答案: