Javascript 通过jQuery提交表单'；行不通

我试图在单击表单提交按钮时调用函数。页面不应该刷新，我想通过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'));

html+='

'；
$（html.appendTo（$（'body'））；

因为必须使用函数绑定动态内容事件：

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

---

对于动态内容，在使用jquery 1.7或更高版本时，请使用：

对于jQuery 1.6.x及更低版本，包括1.4.3，请使用：

对于jQuery 1.4.2或更低版本，请在追加后使用：

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');
}); 

html+='

'；
$（html.appendTo（$（'body'））；
$（“.addCategoryBtn”）.bind（“单击”，函数（）{
log（'addcategory clicked'）；
}); 

---

因此，无论你做什么，都要尽量避免

你能显示一些HTML以便我查找错误吗？在不太可能的情况下，OP正在使用jQuery 1.6.x或更低版本，使用

delegate

，因为

on

只在1.7中添加了

on。
uncaughttypeerror:Object#没有方法“on”
你在使用哪个jQuery版本？非常旧。。。在这种情况下，检查@FrançoisWahl answer，这是一个goos总结，也是对下一个问题的建议，不要忘记指定JQuery版本库。您的意思是：对于jQuery 1.4.2或更低版本，在追加后使用bind？使用
bind（）
类似于使用
click（）
，但您必须在追加HTML后执行它，因为这些方法只有在元素位于DOM中时才有效。由于在1.4.3中添加了
delegate
，如果要使用1.4.2或更低版本，则不能使用它。虽然
live（）
存在于1.4.2中，但它还有其他问题，如果可能的话应该避免。
$("body").delegate('.addCategoryBtn', 'click', function() {  
   console.log('add category clicked');
}); 

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');
});