使用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？

Maybe something like $('#container_add').live('click', function() { */ */ });?

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

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

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