Question

每当点击一个复选框时，我都会尝试在div中添加或删除html，并且我已经让它为某些复选框工作了，但不是我的复选框。

一些复选框在加载时最初在页面上，其他复选框是动态添加的。原始页面加载时的复选框正确地执行了它们应该执行的操作，但是动态添加的复选框在jQuery调用中没有被.change（）选中。

我已经在代码中放置了一个alert（），它应该选中复选框的任何更改，并且它只针对原始复选框执行，但我也有checkAll和uncheckAll javascript函数，这些函数成功地完成了他们应该为所有人做的事情复选框。

以下是在html区域上从Firebug的Inspect Element中获取的片段，显示了相关的复选框：

<div class="orglist" style="background:#dddddd;color:#777777;">
Orgs to be included:
<br>
<input id="org_10346" class="ckbx" type="checkbox" checked="" value="10346" name="org_10346">
XYZ
<br>
<div id="additional">
<input id="org_3" class="ckbx" type="checkbox" checked="" value="3" name="org_3">
GHI
<br>
</div>
<b>Add an additional org:</b>
<br>
<select class="org_type " name="org_type">
<option selected="yes" value=""> </option>
<option value="company">company</option>
<option selected="yes" value="facility">facility</option>
<option value="supplier">supplier</option>
</select>
<br>
Supplier:
<select class="supplier_select" name="org_select">
<option value="ERR">***SELECT ONE***</option>
<option value="1">ABC</option>
<option value="2">DEF</option>
<option value="3">GHI</option>
</select>
<input id="addOrgID" type="button" value="Add" onclick="addOrg()">
<br>
<a href="javascript:checkAll()">Check All</a>
|
<a href="javascript:uncheckAll()">Uncheck All</a>
</div>

以下是应该处理的Javascript函数：

jQuery('input:checkbox, .ckbx').change(function(){
      //Loop through all checkboxes and append div for each one that's checked to the fieldset
      $tempName=this.name;
      alert($tempName);
      $theID = "#fac"+this.id.substr(4);
      $orgID = "#org"+this.id.substr(4);
      if(jQuery('input[name='+$tempName+']').val()){
        jQuery($theID).show();
        jQuery($orgID).show();
      }
      else{
        jQuery($theID).hide();
        jQuery($orgID).hide();
      }
      jQuery("select").each(function(){
          if('electricity'==this.value){
        jQuery(".elec"+this.name.substr(5)).show();
              jQuery(".gas"+this.name.substr(5)).hide();
          }
          if('gas'==this.value){
              jQuery(".elec"+this.name.substr(5)).hide();
              jQuery(".gas"+this.name.substr(5)).show();
          }
          if('both'==this.value){
        jQuery(".elec"+this.name.substr(5)).show();
        jQuery(".gas"+this.name.substr(5)).show();
          }
        });
    }).change();
    });

function checkAll(){
  jQuery(':checkbox').prop('checked', true).change();
};

function uncheckAll(){
  jQuery(':checkbox').prop('checked', false).change();
}

感谢您的任何建议！

Answer 1

不仅要处理原始复选框，还要动态添加一次，您需要使用.on的事件委派。因此，而不是

jQuery('input:checkbox, .ckbx').change(function(){

你现在需要

jQuery('div.orglist').on('change', 'input:checkbox, .ckbx', function(){

Answer 2

使用当前代码，jQuery将选择加载时存在的所有复选框并绑定到其“更改”事件。但是，添加新复选框时，此绑定不会再次运行！

一个选项是在动态创建事件时将函数绑定到每个新复选框的change事件。

jQuery：不包含一些复选框

2 个答案: