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

无论如何，无论你做什么，都要尽量避免live()

Answer 2

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

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

通过jQuery提交表单并不起作用

2 个答案: