Question

我有一个脚本应该在加载时显示一个文本输入字段，其中一个按钮允许用户在单击时创建另一个文本输入字段，我设法通过jQuery执行此操作，它就像魅力一样。但是，似乎.append命令生成的新输入不像普通输入那样工作，我无法通过jQuery获取它们的值，检测到更改......等等。

以下是我要解释的一个例子：

HTML：

<div>
<input type="text" name="" value=""><br>
</div>
<input type="button" name="" value="New input" id="new">

Javascript：

$(function(){
  $("#new").click(function() {
    $("div").append("<input type='text' name='' value=''>");
  });

$("input[type=text]").change(function() {
  alert("Input changed");
 });
});

小提琴：

http://jsfiddle.net/qnU9w/

如您所见，如果您在第一个输入中输入任何内容，它将提醒“输入已更改的消息” 但是，如果您通过“新输入”按钮创建新输入并在其中键入内容，则不会检测到更改，也不会发出任何警报。

Answer 1

在此示例中，.change()处理程序仅绑定到执行点DOM中存在的元素。

要收听新创建的元素，请使用.on()来侦听doucment中存在的文本类型输入元素：

$(document).on('change', "input[type=text]", function() {
    alert("Input changed");
});

Fiddle

编辑：这是delegated method（而不是直接）。

Answer 2

将新元素附加到DOM后，您必须再次向其附加一个事件，如下所示：

$(function(){

    $("#new").click(function() {
        $("div").append("<input type='text' name='' value=''>").on("change", function() {alert("Input Changed!") });

    });

    $("input[type=text]").change(function() {
      alert("Input changed");
      });
});

有更简洁的方法，比如分离功能和附加功能本身，但想法是一样的。

jQuery .append生成的输入不返回任何值。

2 个答案: