使用jQuery克隆表单元素后如何调用AJAX函数？

Question

我有一个可以使用 SheepIt! 插件克隆的动态表单克隆我的表单元素。我的表单有一组动态下拉框，其中第二个下拉框根据第一个下拉框的选择显示一组值。

我的问题是下拉框的动态功能在克隆的下拉菜单上不起作用，并且仅适用于页面上的第一个下拉菜单。

有什么想法为什么会发生这种情况吗？

我创建了一个小提琴，这样你就可以看到 SheepIt!插件可以工作，http://jsfiddle.net/DeJch/1/，但是添加/删除功能没有在小提琴中工作。

克隆完成后是否需要重新调用 AJAX？

也许类似 $('#container_add').live('click', function() { */ */ }); ？

HTML：

<div>
    <label>Item:</label>
    <select class="item" name="item" id="item"> 
        <option value="">Select</option>
        ...
    </select>
</div>          
<div>
    <label class="label>Options:</label>
    <select class="options" name="options" id="options">
        ...
    /select>
</div>  

JavaScript：

$(document).ready(function(){   

    var sheepItForm = $('#clone').sheepIt({
        separator: '',
        allowRemoveLast: true,
        allowRemoveCurrent: true,
        allowAdd: true,
        maxFormsCount: 3,
        minFormsCount: 1,
        iniFormsCount: 1
    });

    $(".item").change(function () { 

      var group_id = $(this).val();
      var self = $(this); // Added line

      var $children = $(this).parent().next().children('select.options')

       $.ajax({
            type: "POST", 
            url: "../../db/groups.php?id=" + group_id, 
            dataType: "json",
            success: function(data){    
                $children.empty()
                $children.append('<option value="">Select</option>');           
                $.each(data, function(i, val){    
                   $children.append('<option value="' + val.group_id + '">' + val.name + '</option>');
                });
                $children.focus();
            },
            beforeSend: function(){
                $children.empty();
                $children.append('<option value="">Loading...</option>');
            },
            error: function(){
                $children.attr('disabled', true);
                $children.empty();
                $children.append('<option value="">No Options</option>');
            }
        })  

    }); 

})

Answer 1

尽管您已经接受了您的答案，但我想我会提到 SheepIt！插件提供以下回调：beforeClone、afterClone、beforeAdd、afterAdd。

如果您在选项中指定 afterAdd 回调，则可以将附加功能绑定到新创建的克隆表单。

myCustomSheepitOptions = {
    separator:'',
    allowRemoveLast:false,
    allowRemoveCurrent:true,
    allowRemoveAll:true,
    allowAdd:true,
    allowAddN:false,
    maxFormsCount:10,
    minFormsCount:1,
    iniFormsCount:1,
    afterAdd:function (data) {
        initializeAutotab($('input.autotab', data));
        initializeDatePicker(data);
    }
};

好处是传递给 afterAdd 的数据只是您创建的新表单。

这种方法的缺点是，如果您使用嵌套表单，则必须在嵌套选项中指定相同的 afterAdd 。

无论如何，这是使用 live/on 的替代方案。

编辑：另请注意，您要使用 afterAdd 而不是 afterClone，因为 afterClone 似乎是在内容实际添加到 DOM 之前。

Answer 2

克隆完成后我需要重新调用 AJAX 吗？

也许类似 $('#container_add').live('click', function() { */ */ }); ？

几乎可以，但不要使用 .live() 事件，因为它现已弃用。请改用 on() 事件。语法几乎相同

$('#container_add').on('click', function() { */ */ });

on 事件与 live 非常相似。看看 http://api.jquery.com/live/