追加后不工作我的jQuery代码

Question

追加后不要使用我的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');
})

Answer 1

像这样尝试

$('#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

Answer 2

尝试：

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

在这里更新了小提琴。

Answer 3

用文档替换'.auto_box' 。

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

原因：为什么上面的代码有效，而您的代码无效？

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

2，您需要为将来添加任何元素分配事件委托 。我们通常使用的方法如.click(...) , .on(..)等仅适用于DOM中当前存在的元素。

3.这就是您提供事件委托的方式。

$（ document ）.on（'keyup change'，'.de1'，function（）{.........}）