jQuery多个按钮点击同一个类的事件只能在第一个按钮上工作 [英] jQuery multiple buttons click events with the same class only working on the first button

问题描述

我有多个具有item-submit的按钮作为类名。当点击按钮时，我想动态附加内容，如下面的代码所示。事情是，点击事件只在第一个按钮上被调用。单击另一个按钮将不会添加任何内容，更糟糕的是，将重新加载整个页面。正如您在代码中可以看到的那样，变量表被附加到order-table，它们是动态创建的。这也是项目提交按钮所在的地方，我想附加内容。

  jQuery（。item-submit）每个（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'> <项目< br />< / label>< / td>< / tr>; $ b的< label style ='color：＃800000; font-weight：bold'> $ b for（i = 0; i< size; i ++）{
 table = table +< tr>< td>< input placeholder ='输入项目名称...'name ='items + i +'class ='items'type ='text'/>< / td>< td>< input placeholder ='输入项目成本...'name ='cost'+ i + ='cost'type ='text'/>< / td>< / tr>; 
} 
 table = table +< tr>< td>< label style ='color：＃800000; f ont-weight：bold;'>总成本< / label>< / td>< td>< input占位符='总成本'name ='totalcost'class ='totalcost'type ='text'/> ;< / TD>< / TR>< / tbody的>< /表>; 
 jQuery（＃order-table+ id）.append（table）; 
 jQuery（＃items+ id）.attr（readonly，readonly）; 
 jQuery（＃+ id）.attr（disabled，disabled）; 
返回false; 
}）; 
}）; 
  

我也尝试过jQuery（）。

如果有人能帮我，我会非常感激的。
如果有什么不清楚，请随时发表评论。谢谢。

解决方案

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

I have multiple buttons having "item-submit" as class name. I wanted to dynamically append contents as shown in the code below when the button is clicked. The thing is, the click event is only being called on the first button. Clicking another button will not add any content, and worse, will reload the entire page. As you can see in the code, the variable table is being appended to order-table, which were created dynamically. This is also where the item-submit button resides where I wanted to append the contents.

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

I have also tried jQuery("").click() and still nothing.

I would greatly appreciate it, if someone could help me. And if something is not clear, please feel free to leave a comment. Thank you.

解决方案

I've got it all figured out. The problem is that the buttons are created dynamically. I don't really know what happened, but I think it is because the script is not loaded for the new contents appended. What I did was add the click functions in every content appended. Seems to work just fine.

这篇关于jQuery多个按钮点击同一个类的事件只能在第一个按钮上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！