0

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

所以，我把我的 Ajax 返回的数据放入弹出 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)"

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

谢谢大家！

4

1 回答 1

2

在对 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);
});

演示

笔记

  • clone(true,true)用数据和事件进行深度克隆。
  • id 生成被简化。
  • 输入字段需要一个 id<label for="...">才能咬住。如果您可以不使用标签的for功能，那么您应该完全避免对 id 的需求。
  • 克隆按钮单击和输入字段 keyup 和输入字段焦点处理委托给#course_container.
  • get_equiv()按名称附加，并且在演示中有一个简单的虚拟语句来证明它被调用。
于 2012-09-02T03:37:14.170 回答