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

即使你已经接受了你的回答，我还以为我会提到那只绵羊！ plugin提供以下回调：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/

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

2 个答案: