Can'；不要让jQuery关注克隆的输入字段

我有一个页面，需要根据用户需要经常创建动态表单字段，我正在尝试使用Ajax将其绑定到我的数据库中，以便更快地输入表单并防止用户输入错误

因此，我将Ajax返回的数据放入popup div，用户选择，然后填写表单字段。问题出在克隆字段上。他们似乎不想在集中注意力时弹出div。我认为这与它们被创建/添加到DOM时有关

以下是创建克隆的我的JS：

$(document).ready(function() {
    var regex = /^(.*)(\d)+$/i;
    var cloneIndex = $(".clonedInput").length;

    $("button.clone").live("click", function(){
        $(this).parents(".clonedInput").clone()
            .appendTo("#course_container")
            .attr("id", "clonedInput" +  cloneIndex)
            .find("*").each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = match[1] + (cloneIndex);
                }
        });
        cloneIndex++;
        numClones=cloneIndex-1;
        //alert("numClones "+numClones);
    });

在这里，我希望能够关注正确的克隆字段并调用弹出窗口。baker_equiv0 id是原始代码，而baker_equiv1是第一个克隆代码

$('#baker_equiv0').focus(function() { \\ THIS CODE WORKS
$('.popup').fadeIn(500);
$('#results').empty();
// document.enter_data.baker_equiv1.value="test"; THIS LINE WORKS
//alert("numClones "+numClones);
                }); 

$('#baker_equiv1').focus(function() { // THIS DOESN'T EVER FIRE
alert("numClones "+numClones);
$('.popup').fadeIn(500);
$('#results').empty();
}); 

以下是带有表单的HTML：

<label for="baker_equiv" class="">Baker Equivalent: <span class="requiredField">*</span></label>
<input type="text" class="cinputsa" name="baker_equiv[]" id="baker_equiv0" size="8" ONKEYUP="get_equiv(this.value);">

Baker等效物：*

如果我把它放在上面的HTML代码中，它可以正常工作：

onfocus=“alert（this.id）”

我还对如何根据创建的id数组调整JS代码以使其工作感兴趣，而不必为每个可能的字段克隆集复制代码，例如，baker_equiv[]，而不是baker_equiv0、baker_equiv1等

---

谢谢大家

在对HTML做了一些假设之后，我得出了以下结论：

HTML:

<div id="course_container">
    <div class="cloneMe"><!-- wrapper could be any block or inline element eg. <span> or <form> -->
        <label for="input0">Baker Equivalent: <span class="requiredField">*</span></label>
        <input id="input0" type="text" class="cinputsa needsPopup" name="baker_equiv[]" size="8" />
        <button class="clone">Clone</button>
    </div>
</div>

注释

• 克隆（true，true）

  使用数据和事件深度克隆
• 简化了id生成
• 输入字段需要一个id，以便
  进行匹配。如果您可以不使用标签“

  ”来实现

  功能，那么您应该完全避免需要ID
• 单击克隆按钮，输入字段键控，输入字段焦点处理被委托给

  #课程(u）容器

• get_equiv（）

  是按名称附加的，并且在演示中有一个简单的伪语句来演示调用它

---

明天将仔细查看。谢谢甜菜根！很好的解决方案，甜菜根！非常感谢您的努力以及特别有用的注释和演示。@Rebel1Moon-太棒了！如果您的初始HTML包含多个cloneMe块，请记住调整

cloneIndex=0以反映使用的最高索引。我在答复中添加了一条评论。
$(function() {
    //*** fixed data ***
    var $$ = { //cache of jQuery objects
            course_container: $("#course_container"),
            popup : $("#popup"), //presumably only one popup, so it gets an id
            results: $("#results")
        },
        cloneIndex = 0, // adjust as required to reflect highest index used in the initial HTML
        input_id_prefix = 'input';

    //*** event handlers ***
    $$.course_container.on('click', 'button.clone', function() {
        var $clone = $(this).closest('.cloneMe').clone(true, true),
            id = input_id_prefix + ++cloneIndex;
        $clone.find('input').attr('id', id).end().find('label').attr('for', id).end().appendTo($$.course_container);
    });
    $$.course_container.on('focus', 'input.needsPopup', function() {
        $$.popup.fadeIn(500);
        $$.results.empty();
    }).on('keyup', get_equiv);
});