我不敢說我​​的onclick使用AJAX

Question

後javascript函數我完全在JavaScript/jQuery的新手，我有一個小問題:)

我使用AJAX來獲得DATAS生成和填充表單字段。之後，我想添加和/或刪除JavaScript功能的領域，但它不起作用。

正如我正在學習，我一步一步地讓我的代碼，所以下面的代碼實現了ajax請求（這是完美的工作），並且我想用一個on +圖片。

$(document).ready(function(){ 

var id = $('#subId').val(); 
var num  = $('.cloneSub').length; 
var newNum = new Number(num + 1); 

$.ajax({ 
    type: 'POST', 
    dataType: 'json', 
    url: '/admin/popsub2/', 
    data: 'id='+id, 
    async: false, 
    success: function(data){ 

     $.each(data, function(key, val){ 

      // Add and populate the input text element 
      var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum); 
      newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum); 

      $('#sub' + num).attr('value', val); 

      $('#sub' + num).after(newElem); 
      $(newElem).before('<br />'); 

      // Simply add the select element 
      var newSelect = $('#editMenu_article' + num).clone().attr('id', 'editMenu_article' + newNum); 
      newSelect.children(':first').attr('id', 'editMenu_article' + newNum).attr('name', 'editMenu_article' + newNum); 

      $('#editMenu_article' + num).after(newSelect); 
      $(newSelect).before('<br />'); 
     }); 
    }, 

    failure: function(){ 
     alert('echec !!!'); 
    } 
}); 


function addField(){ 

    // Add the input text element 
    var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum); 
    newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum); 

    $('#sub' + num).attr('value', val); 

    $('#sub' + num).after(newElem); 
    $(newElem).before('<br />'); 

    // Add the select element 
    var newSelect = $('#addMenu_article' + num).clone().attr('id', 'addMenu_article' + newNum); 
    newSelect.children(':first').attr('id', 'addMenu_article' + newNum).attr('name', 'addMenu_article' + newNum); 

    $('#addMenu_article' + num).after(newSelect); 
    $(newSelect).before('<br />'); 

} 

}); 

addField（）函數根本不起作用，我不知道爲什麼。 AJAX似乎牽涉到腳本執行。

謝謝你的幫助。

UPDATE

我+圖像：

<img src="images/plus.png" id="editSub2" /> 

追隨你的幫助，我想這些代碼：

$('#editSub2').live('click', function(){ ... }); 

$('#editSub2').bind('click', function(){ ... }); 

但沒有任何工程。

Answer 1

你已經在jQuery文檔就緒回調的範圍內聲明瞭addField()。除此功能外，任何人都無法知曉。你可以聲明它是一個全局函數，但你會更好地封裝它。您可能會找到類似Javascript Patterns的資源。

Answer 2

如果圖像是動態創建的，您應該在創建它之後綁定click事件，如果沒有，則在文檔就緒塊上綁定它，您必須綁定它。

$('img#myimg').bind("click", function(){ 

// Add the input text element 
    var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum); 
    newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum); 

    $('#sub' + num).attr('value', val); 

    $('#sub' + num).after(newElem); 
    $(newElem).before('<br />'); 

    // Add the select element 
    var newSelect = $('#addMenu_article' + num).clone().attr('id', 'addMenu_article' + newNum); 
    newSelect.children(':first').attr('id', 'addMenu_article' + newNum).attr('name', 'addMenu_article' + newNum); 

    $('#addMenu_article' + num).after(newSelect); 
    $(newSelect).before('<br />'); 


}); 

Answer 3

聽起來像您已經遇到了DOM事件處理程序陷阱。如果你曾經處理js事件，這個問題會更有意義。

$(".images").click(myFunc); 

是jQuery的推移，發現選擇相匹配的所有元素，並結合功能myFunc到onclick事件，使用這種（大致）代碼：

基本上，當你這樣做會發生什麼

element.onclick = myFunc; 

（它實際上更復雜的東西，但只是假設，那它做什麼）

，當您運行情況上面的代碼，只有這樣，添加到DOM的額外元素纔沒有添加該事件，jQuery從未被告知添加它們！

但是，一切都不會丟失，您可以使用jQuery中輝煌的.live()函數綁定到所有匹配的元素，現有的和將來的。它比手動重新綁定新元素和減少錯誤更簡單易用。一個小缺點是它會干擾事件排序，並且您必須使用類似於.bind()的界面，因此您使用.live("click", myfunc)代替。

編輯

在讀更多你的問題來看，似乎問題是，你必須是你必然要#editSub2但產生#editSub<n>所以jQuery有不知道你在說什麼。我建議使用類將常用功能推送到元素上，併爲唯一元素使用ID，因爲它可能更有效。