1

我有一个类的文本框，在按钮单击时我附加了同一类的另一个元素。

我怎样才能使新的 TextBox 的行为与其类的其余部分一样？

示例：http: //jsfiddle.net/GCQKE/

HTML：

<div class="container">
    <input id="textbox1" type="text" class="textbox" />
    <input id="textbox2" type="text" class="textbox" />
    <input id="textbox4" type="text" class="textbox" />
</div>
<input type="button" class="append" value="Append new TextBox" />

查询

$(".append").click(function (e) {
    $(".container").append("<input id='textbox3' type='text' class='textbox' />");
});


$(".textbox").click(function (e) {
    alert($(e.target).attr("id"));
});

当我单击所有文本框时，我会收到警报，除了单击按钮时生成的警报。有什么建议吗？

4

2 回答 2

1

您.click(...)只会绑定到在页面加载时具有该类的元素，

如果你想现在或将来将函数绑定到类的所有元素（出现在页面加载或动态插入），请使用 jquery 的委托...

http://api.jquery.com/delegate/

代替

$(".textbox").click(function (e) {
    alert($(e.target).attr("id"));
});

和

$('.container').delegate('.textbox', 'click', function(e){
    alert($(e.target).attr("id"));
});
于 2013-03-15T14:29:36.843 回答
1

演示（jsfiddle 更新）

您应该通过将事件绑定到在代码运行时存在的父级并为其提供您实际希望事件绑定到的子级的选择器来.on()为未来元素使用正确的语法来做到这一点。

$('.container').on('click', '.textbox', function() {
   //alert($(this).attr("id"));
   console.log(this.id);
});
于 2013-03-15T14:35:30.067 回答