Question

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

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

在这种情况下你不需要每个循环，只需给整个类点击事件，“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'）。点击 ...

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

为了查看正在发生的事情，请在第一行使用 preventDefault 。

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

这样，即使您的代码中存在错误，您也可以抓住并修复它，因此页面不会重新加载。祝你好运。

Answer 5

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

jQuery多个按钮单击仅在第一个按钮上工作的同一类的事件

5 个答案: