Question

我有一个页面需要像用户需要的那样经常创建动态表单字段，我正在尝试使用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);">

如果我把它放在上面的HTML代码中，它可以正常工作：onfocus="alert(this.id)"

我也有兴趣如何根据创建的id数组调整JS代码，而不是为每个潜在的字段克隆集复制代码，即baker_equiv []而不是baker_equiv0，baker_equiv1等

全部谢谢！

Answer 1

在对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>

Javascript：

$(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);
});

<强> DEMO

备注

clone(true,true)克隆了数据和事件。

简化了id生成。

输入字段需要<label for="...">的ID才能开启。如果您没有标签'for功能，那么您应该完全避免使用ID。

克隆按钮单击和输入字段键入和输入字段焦点处理委派给#course_container。

get_equiv()通过名称附加，并且在演示中有一个简单的虚拟语句来声明它被调用。

无法让jQuery专注于克隆的输入字段

1 个答案: