我有一个动态形式，可以被克隆，使用 SheepIt！插件克隆我的表单元素。我的表单有一组动态的下拉框，其中第二个下拉框中显示的基础上，从第一个下拉框中选择一组值。

我的问题是，在下拉框的动态功能不正常的克隆的下拉列表，并仅适用于页面上的第一个下拉。

任何想法，为什么发生这种情况？

我创建了一个小提琴，所以你可以看到如何SheepIt！插件作品， http://jsfiddle.net/DeJch/1/ ，但添加/删除功能不工作的小提琴。

我一定要记得AJAX克隆作出后？

也许像 $（'＃container_add）生活（'点击'，函数（）{* / * /}）;

HTML：

 ＆LT; D​​IV＆GT;
    ＆LT;标签＆gt;项目：其中; /标签＆gt;
    ＆LT;选择类=项NAME =项ID =项＆GT;
        ＆LT;期权价值=＆GT;选择＆LT; /选项＆GT;
        ...
    ＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV＆GT;
    ＆LT;标签类=标签＆gt;选项：LT; /标签＆gt;
    ＆LT;选择类=选项NAME =选择ID =选项＆GT;
        ...
    /选择＆GT;
＆LT; / DIV＆GT;
 

JavaScript的：

  $（文件）。就绪（函数（）{

    VAR sheepItForm = $（'＃克隆）。sheepIt（{
        分隔器： ''，
        allowRemoveLast：真正的，
        allowRemoveCurrent：真正的，
        allowAdd：真正的，
        maxFormsCount：3，
        minFormsCount：1，
        iniFormsCount：1
    }）;

    $（项目）。改变（函数（）{

      VAR GROUP_ID = $（本）.VAL（）;
      VAR自我= $（本）; //添加行

      变量$孩子= $（本）.parent（）。下一个孩子（）。（'select.options）

       $阿贾克斯（{
            键入：POST，
            网址：../../db/groups.php?id=+ GROUP_ID，
            数据类型：JSON，
            成功：功能（数据）{
                $ children.empty（）
                $ children.append（'＆LT;期权价值=＆GT;选择＆LT; /选项＆GT;'）;
                $每个（数据，功能（我，VAL）{
                   $ children.append（'＆LT;期权价值=+ val.group_id +'＆GT;+ val.name +'＆LT; /选项＆GT;'）;
                }）;
                $ children.focus（）;
            }，
            beforeSend：函数（）{
                $ children.empty（）;
                $ children.append（'＆LT;期权价值=＆GT;载入中...＆LT; /选项＆GT;'）;
            }，
            错误：函数（）{
                $ children.attr（禁用，真正的）;
                $ children.empty（）;
                $ children.append（'＆LT;期权价值=＆GT;无选项＆LT; /选项＆GT;'）;
            }
        }）

    }）;

}）
 

解决方案   

我一定要记得AJAX克隆作出后？

 也许类似$（'＃container_add）。住（点击，函数（）{* / * /}）;？
 

pretty的多是的，但不要使用 .live（）的事件，因为它现在是很precated。使用在（）事件代替。语法是pretty的大同小异

  $（'＃container_add）对（'点击'，函数（）{* / * /}）;
 

该事件是非常相似的生活。看看 http://api.jquery.com/live/

I have a dynamic form that can be cloned, using the SheepIt! plugin to clone my form elements. My form has a dynamic set of dropdown boxes, where the second dropdown box display a set of values based on the selection from the first dropdown box.

My problem is that the dynamic function of the dropdown boxes is not functioning on cloned dropdowns, and only works for the first dropdown on the page.

Any ideas why this is happening?

I created a fiddle so you can see how the SheepIt! plugin works, http://jsfiddle.net/DeJch/1/, but the add/delete functions are not working in fiddle.

Do I have to recall the AJAX after the clone is made?

Maybe something like $('#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>');
            }
        })  

    }); 

})

Do I have to recall the AJAX after the clone is made?

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

Pretty much yes, but don't use .live() event as it is now deprecated. Use the on() event instead. Syntax is pretty much the same

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

The on event is much similar to live. Take a look at http://api.jquery.com/live/