通過jQuery提交表單不起作用

Question

我正在嘗試在單擊表單提交按鈕時調用函數。 頁面不應該刷新，我想通過AJAX添加類別。

問題是當我手動將它添加到html文件時一切正常，但是當我嘗試通過appendTo在javascript函數中添加它時，從不調用click函數。 這里有什么問題？

使用Javascript：

$(".addCategoryBtn").click(function() {  
       console.log('add category clicked');
    });  

JavaScript函數的一部分：

html += '<br><br><form id="addCategory_form" action=""><input type="text" class="inptCategoryName" placeholder="Kategorie Name">&nbsp;<input type="text" class="inptHtmlColor" placeholder="Hintergrund: #000FFF">&nbsp;<input type="text" class="inptTextColor" placeholder="Text: #000FFF"><input type="button" value="Go" class="addCategoryBtn"></form></div>';

$(html).appendTo($('body'));

Answer 1

對於動態內容，使用jquery 1.7或更高版本時，請使用on（） ：

$("body").on('click','.addCategoryBtn',function() {  
    console.log('add category clicked');
});

對於jQuery 1.6.x及更低版本，包括1.4.3使用delegate（） ：

$("body").delegate('.addCategoryBtn', 'click', function() {  
   console.log('add category clicked');
}); 

對於jQuery 1.4.2或更低版本，在追加后使用bind ：

html += '<br><br><form id="addCategory_form" action=""><input type="text" class="inptCategoryName" placeholder="Kategorie Name">&nbsp;<input type="text" class="inptHtmlColor" placeholder="Hintergrund: #000FFF">&nbsp;<input type="text" class="inptTextColor" placeholder="Text: #000FFF"><input type="button" value="Go" class="addCategoryBtn"></form></div>';

$(html).appendTo($('body'));

$(".addCategoryBtn").bind("click", function() {  
    console.log('add category clicked');
}); 

無論如何，你做什么，盡量避免生活（）

Answer 2

因為必須使用on函數綁定動態內容事件：

$("body").on('click','.addCategoryBtn',function() {  
       console.log('add category clicked');
});