Don'在追加后，我无法处理jQuery代码

Don't work my jQuery code after append

本文关键字：处理 代码 jQuery 追加 Don      更新时间：2024-03-24

在追加后不要处理我的jQuery代码。如何更改js代码并进行操作？

我不使用来自ide的"#aaa或#sss"，不使用它们怎么办？

演示：http://jsfiddle.net/sq4kx/

html:

<a href="" class="qqq">Click Me</a>
<div id="aaa">
    <div id="sss">
    </div>
</div>

jQuery:

$('.qqq').on('click', function (e) {
    e.preventDefault();
    $('#sss').empty().append('After typed must result alert: "This is ok" !??<div class="auto_box"><input name="we" class="de1"></div>');
})
$('.auto_box').on('keyup change', '.de1', function () {
    alert('This is ok');
})

试试这个吧，

$('#sss').on('keyup change', '.auto_box .de1', function () {
    alert('This is ok');
});

演示1

或

$('.qqq').on('click', function (e) {
    e.preventDefault();
    $('#sss').empty().append('After typed must result alert: "This is ok" !??<div class="auto_box"><input name="we" class="de1"></div>');    
    // bind event here
    $('.auto_box').on('keyup change', '.de1', function () {
        alert('This is ok');
    });
});

演示2

尝试：

$(document).on('keyup change', '.de1', function () {
    alert('This is ok');
});

此处更新了fiddle

用文档替换'.auto_box'。

$(document).on('keyup change', '.de1', function () {
    alert('This is ok');
});

原因：为什么上面的代码有效而你的代码无效

1.您正在动态添加元素。简单地说，在加载DOM时，您附加的元素并不存在。

2.您需要为将来添加的任何元素指定事件委派。我们通常使用的方法（如.click(...) , .on(..)等）仅适用于当前DOM中的元素。

3.这就是您提供活动授权的方式。

$（文档）.on（'keyup change'，'.de1'，function（）｛…｝）

相关文章：