Question

问题：当我克隆时 <div id="#cloneme1">...</div>我明白了 <div id="cloneme2">...</div>但.keyup（）函数不会读取新的DOM元素

$('#btnAdd').click(function() {
      var num= $('.clonedInput').length; // how many "duplicatable" input fields we currently have
      var newNum= new Number(num + 1);      // the numeric ID of the new input field being added

      // create the new element via clone(), and manipulate it's ID using newNum value
      var newElem = $('#cloneme' + num).clone().attr('id', 'cloneme' + newNum);

      // manipulate the name/id values of the input inside the new element
      newElem.children(':first').attr('id', 'alteredguianswer' + newNum)

      // insert the new element after the last "duplicatable" input field
      $('#cloneme' + num).after(newElem);
    });

    $('input[type="text"]').keyup(function(){
                var id = $(this).attr("id"); // variable id = id of current textfield
                var value=$(this).val();  // variable value = value in current textfield
                $("#someplace"+id).text(value);  // edit text elsewhere on page using value
            });


<div>
     <input type="button" id="btnAdd" value="add another name" />
</div>
     <div id="cloneme1" style="margin-bottom:4px;" class="clonedInput">Question:<input type="text" id="guianswer1" value="Answer 1" /></div>

我不明白如何获取函数来读取新的克隆元素

Answer 1

您正在为DOM中的所有匹配元素绑定keyup事件，但不绑定将来的元素。

如果您使用的是jQuery 1.7或更高版本，请尝试使用

$('input[type="text"]').on('keyup', function(){
    var id = $(this).attr("id"); // variable id = id of current textfield
    var value=$(this).val();  // variable value = value in current textfield
    $("#someplace"+id).text(value);  // edit text elsewhere on page using value
});

如果您使用的是早期版本，请尝试使用实时

$('input[type="text"]').live('keyup', function(){
    var id = $(this).attr("id"); // variable id = id of current textfield
    var value=$(this).val();  // variable value = value in current textfield
    $("#someplace"+id).text(value);  // edit text elsewhere on page using value
});

Answer 2

您只是将keyup处理程序分配给定义处理程序时存在的元素。这就像要求空荡荡的房子里的每个人一起吃晚饭，然后想知道为什么每个人，一个小时后他们回家，仍然很饿。

您需要将处理程序分配给每个克隆元素：

var keyupHandler = function() { ... };
$('#btnAdd').click(function() {
    ...
    newElem.keyup(keyupHandler);
}

或者你需要利用jQuery为你做这件事，使用on代替keyup：

$(document).on('keyup', 'input[type="text"]', function() { ... });

后一种形式将捕获与所存在的选择器匹配的所有元素上的事件，或者将在以后存在。

Jquery克隆元素，改变id然后使用keyup（）不工作

2 个答案: