jQuery多个按钮点击仅在第一个按钮上工作的具有相同类别的事件

Question

我有多个具有“item-submit”作为类名的按钮。我想动态追加下面的代码中显示的内容，当点击按钮时。事情是，点击事件只在第一个按钮上被调用。点击另一个按钮不会添加任何内容，更糟糕的是，将重新加载整个页面。正如你在代码中看到的那样，变量表被附加到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（“”）。click（）并且什么也没有。

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

Answer 1

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

Answer 2

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

你并不需要遍历一个通过一个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 4

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

}); 

是正确的语法使用 - 你不必重复自己..

你在JavaScript控制台中看到任何错误？

Answer 5

您可以使用jQuery的（“项目提交”）。点击 ...

我的猜测是有一个错误，这就是为什么重新加载页面，因为该错误后，您的所有脚本被忽略，包括返回错误声明，并且因为页面重新加载，您无法看到Firebug内部的错误（控制台）。

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

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

即使您的代码中存在错误，并且您可以捕获并修复它，此方法页也不会重新加载。祝你好运。