jQuery多个按钮单击具有相同类的事件仅适用于第一个按钮

Question

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

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("").click() 还是没有。

如果有人可以帮助我，我将不胜感激。 如果有不清楚的地方，请随时发表评论。谢谢。

Answer 1

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

在这种情况下你不需要每个循环，只需给整个班级点击事件，“this”就是你点击的那个

Answer 2

您不需要遍历 jQuery 选择器，这也是导致该错误的原因。你的代码应该更像这样：

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

Answer 3

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

});

是正确使用的语法 - 你不需要自己迭代..

您是否在 javascript 控制台中看到任何错误？

Answer 4

您可以使用 jQuery('.item-submit').click...

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

为了查看发生了什么，请在第一行使用 preventDefault。

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

即使您的代码中有错误，页面也不会重新加载，您可以捕获并修复它。祝你好运。

Answer 5

我都明白了。问题是按钮是动态创建的。我真的不知道发生了什么，但我认为这是因为没有为附加的新内容加载脚本。我所做的是在附加的每个内容中添加点击功能。似乎工作得很好。