jQuery多个按钮单击事件，同一个类只处理第一个按钮

我有多个按钮以“item submit”作为类名。我想在单击按钮时动态添加内容，如下面的代码所示。问题是，单击事件只在第一个按钮上被调用。单击另一个按钮不会添加任何内容，更糟糕的是，会重新加载整个页面。正如您在代码中看到的，变量表被追加到order表中，order表是动态创建的。这也是ItemSubmit按钮所在的位置，我希望将内容附加到该位置

jQuery(".item-submit").each(function(){
        jQuery(this).click(function(){
            alert("aw");
            var id = jQuery(this).attr("id");
            var size = jQuery("#items"+id).val();
            alert("ID: "+ id);
            var table = "<table><tbody><tr><td colspan='2'><label style='color: #800000;font-weight:bold'>Detailed Description & Price of Item<br /></label></td></tr>";
            for(i=0; i<size; i++) {
                table = table + "<tr><td><input placeholder='Enter item names...' name='items"+i+"' class='items' type='text' /></td><td><input placeholder='Enter cost of items...' name='cost"+i+"' class='cost' type='text' /></td></tr>";
            }
            table = table + "<tr><td><label style='color: #800000; font-weight: bold;'>Total Cost</label></td><td><input placeholder='Total Cost' name='totalcost' class='totalcost' type='text' /></td></tr></tbody></table>";
            jQuery("#order-table"+id).append(table);
            jQuery("#items"+id).attr("readonly","readonly");
            jQuery("#"+id).attr("disabled","disabled");
            return false;
        });
    });

jQuery（“.item submit”）。每个（函数（）{
jQuery（this）.单击（函数（）{
警报（“aw”）；
var id=jQuery（this.attr（“id”）；
var size=jQuery（“#items”+id）.val（）；
警报（“ID:+ID”）；
var table=“项目的详细说明和价格
”；
对于（i=0；i
jQuery（.item submit））。单击（函数（）{
警报（“aw”）；
var id=jQuery（this.attr（“id”）；
var size=jQuery（“#items”+id）.val（）；
警报（“ID:+ID”）；
var table=“项目的详细说明和价格
”；
对于（i=0；i您不需要遍历jQuery选择器，这也是导致错误的原因。您的代码可能更像这样：

jQuery（“.item submit”）。单击（函数（）{
警报（“aw”）；
var id=jQuery（this.attr（“id”）；
var size=jQuery（“#items”+id）.val（）；
警报（“ID:+ID”）；
var table=“项目的详细说明和价格
”；
对于（i=0；i
是要使用的正确语法-您不需要自己迭代

您是否在javascript控制台中看到任何错误？
您可以使用jQuery（'.item submit'）。单击…


我猜是有一个错误，这就是页面重新加载的原因，因为错误后的所有脚本都会被忽略，包括return false语句，并且因为页面重新加载，您在Firebug（控制台）中看不到错误

要查看正在发生的情况，请在第一行使用preventDefault

jQuery(".item-submit").click(function(event){
    event.preventDefault();
    // ... your code here
});

这样，即使代码中有错误，页面也不会重新加载，您可以捕获并修复它。祝您好运。
我已经解决了所有问题。问题是按钮是动态创建的。我真的不知道发生了什么，但我想这是因为没有为附加的新内容加载脚本。我所做的是添加clic每个附加内容中都有k个函数。似乎效果很好。
我也尝试过。仍然一样。不知道缺少什么。我尝试过使用此函数。但页面仍然会重新加载。正如您所知，按钮是通过单击另一个按钮动态创建的。我尝试过使用img而不是输入按钮，然后将它们放在容器上页面不会重新加载，但除了第一个容器外，事件仍然不会被触发。您可以发布或上载示例吗？我已经尝试过这个。它应该可以工作，但这次不行。Firebug控制台中没有错误，因为页面正在重新加载。我已经尝试过这个，正如我在上面的帖子中所述。：D有什么想法吗？ooopppps！我有这一切都解决了。很抱歉。问题是，按钮是动态创建的。我真的不知道发生了什么，但我认为这是因为脚本没有为附加的新内容加载。我所做的是，我在每个附加的内容中添加了单击功能。似乎工作得很好。感谢大家的输入…：Dyou是b为此，请不要使用jQuery的on（）函数-它可以为您动态绑定单击；）您可以通过使用.on并引用公共父元素来避免执行此操作。。。
    jQuery(".item-submit").click(function(){
        alert("aw");
        var id = jQuery(this).attr("id");
        var size = jQuery("#items"+id).val();
        alert("ID: "+ id);
        var table = "<table><tbody><tr><td colspan='2'><label style='color: #800000;font-weight:bold'>Detailed Description & Price of Item<br /></label></td></tr>";
        for(i=0; i<size; i++) {
            table = table + "<tr><td><input placeholder='Enter item names...' name='items"+i+"' class='items' type='text' /></td><td><input placeholder='Enter cost of items...' name='cost"+i+"' class='cost' type='text' /></td></tr>";
        }
        table = table + "<tr><td><label style='color: #800000; font-weight: bold;'>Total Cost</label></td><td><input placeholder='Total Cost' name='totalcost' class='totalcost' type='text' /></td></tr></tbody></table>";
        jQuery("#order-table"+id).append(table);
        jQuery("#items"+id).attr("readonly","readonly");
        jQuery("#"+id).attr("disabled","disabled");
        return false;
    });

$(".item-submit").click(function() {

});

jQuery(".item-submit").click(function(event){
    event.preventDefault();
    // ... your code here
});