1

我有多个以“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() 仍然没有。

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

4

5 回答 5

0

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

于 2012-09-12T01:28:23.657 回答
0 
    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”将是您点击的那个

于 2012-09-11T11:58:09.383 回答
0

您不需要遍历 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;
    });
于 2012-09-11T11:58:30.770 回答
0 
$(".item-submit").click(function() {

});

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

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

于 2012-09-11T11:58:42.517 回答
0

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

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

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

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

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

于 2012-09-11T12:26:43.677 回答