jQuery的多个按钮的点击事件与同一类只对第一个按钮工作(jQuery multiple butt

我有“的项目提交”作为类名称的多个按钮。我想如图按钮被点击时下面的代码来动态追加内容。事实是，单击事件才会被调用的第一个按钮。点击另一个按钮不会添加任何内容，更糟的是，将刷新整个页面。正如你可以在代码中看到，变量表被追加到顺序表，将其动态地创建。这也是该项目提交按钮驻留的位置，我想追加内容。

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（“”）。点击（），仍然一无所获。

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

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

你不需要每个循环在这种情况下，只要给全班的点击事件，“这”将是您点击的一个

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（“项目提交”）。点击 ...

我的猜测是有一个错误，这就是为什么页面重新加载，因为错误毕竟你的脚本被忽略，包括返回虚假陈述，并且因为页面重新加载，你不能看到里面萤火虫（ 控制台 ）的错误。

为了看到发生了什么，第一行使用的preventDefault。

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

这样，页面将不会加载即使是在你的代码中的错误，您可以看看它和解决它。祝好运。

Answer 5:

我已经得到了这一切想通了。问题是按钮动态创建。我真的不知道发生了什么，但我认为这是因为剧本没有加载追加新内容。我所做的是在附加的每个内容添加点击功能。似乎工作就好了。

文章来源: jQuery multiple buttons click events with the same class only working on the first button