如何使用jQuery克隆表單元素後調用AJAX函數？

我有一個可以克隆的動態表單，使用SheepIt!插件克隆我的表單元素。我的表單有一組動態下拉框，其中第二個下拉框會根據第一個下拉框中的選擇顯示一組值。如何使用jQuery克隆表單元素後調用AJAX函數？

我的問題是，下拉框的動態功能在克隆下拉列表中不起作用，並且僅適用於頁面上的第一個下拉菜單。

任何想法爲什麼會發生這種情況？

我創建了一個小提琴，所以你可以看到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>'); 
      } 
     }) 

    }); 

})

來源

2012-01-06 Michael

我一定要記得AJAX克隆作出後？
Maybe something like $('#container_add').live('click', function() { */ */ });? 

差不多是的，但不要使用.live()事件，因爲它現在已經過時。改用on()事件。語法幾乎相同

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

on事件與live很相似。看看http://api.jquery.com/live/

來源

2012-01-07 00:01:32

謝謝肖恩，但我怎麼回想起AJAX呢？ – Michael 2012-01-07 02:39:49

使用'on'方法將'change'事件綁定到'.item'類，JQuery將處理其餘 – 2012-01-07 23:08:30

即使你已經接受了你的答案，我以爲我會提到那個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之前。

來源

2012-04-06 17:42:49 jgrowl

如何使用jQuery克隆表單元素後調用AJAX函數？

回答

相關問題