我试图在单击表单提交按钮时调用一个函数。页面不应刷新,我想通过 AJAX 添加类别。
问题是当我手动将它添加到 html 文件时一切正常,但是当我尝试通过 appendTo
将它添加到 javascript 函数时,点击函数永远不会被调用。这里有什么问题?
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"> <input type="text" class="inptHtmlColor" placeholder="Hintergrund: #000FFF"> <input type="text" class="inptTextColor" placeholder="Text: #000FFF"><input type="button" value="Go" class="addCategoryBtn"></form></div>';
$(html).appendTo($('body'));
最佳答案
对于动态内容,当使用 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"> <input type="text" class="inptHtmlColor" placeholder="Hintergrund: #000FFF"> <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()
关于javascript - 通过 jQuery 提交表单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14588779/