javascript - 具有多个元素和多个函数的 jQuery 主体 onChange

Question

如何限制多个主体 onChange 函数的执行，使其真正仅在选择器抓取时运行？

$('body').on('change',$selectRadios,function(e){
    // do something and stuff like
    $btnNext.removeAttr('disabled');
    console.log('I should only run if I change $setupRadios')
}

$('body').on('change',$selectCheckboxes,function(e){
    // do something else and stuff without interfering with the first onChange-function like
    $btnNext.attr('disabled',true);
    console.log('I should not run if I change $setupRadios');
}

如果我这样做，如果我更改 $selectRadios，btnNext 将不会重新启用，但它将保持禁用状态(它实际上运行第二个函数，正如我在控制台中看到的那样，因为它记录了“我不应该运行”如果我也更改 $setupRadio»)

更新:我必须使用正文中的事件委托(delegate)，而不是直接缓存元素，因为 $selectRadio 和 $selectCheckboxes 会通过更多脚本动态添加到页面

更新 2: $selectRadio 和 $selectcheckboxes 是通过以下方式添加的:

function addTeam() {

for(var i = 0; i < resultSetupCount; i++) {

    $('.js-setup ul').append($('<li tabindex="0"><input class="js-setupRadio" type="radio" id="setup'+(i+1)+'" name="setup" value="setup'+(i+1)+'" data-setup0="'+resultSetupGoalie[i]+'" data-setup1="'+resultSetupAbwehr[i]+'" data-setup2="'+resultSetupVorne[]+'" data-trck="setup-'+resultSetupTrck+'-clicked" tabindex="-1" /><label for="setup'+(i+1)+'"><img alt="" src="'+resultSetupImg[i]+'" srcset="'+resultSetupImg[i]+' 1x, '+resultSetupImg2x[i]+' 2x" /><span>'+resultSetupName[i]+'</span></label></li>'));

}

}

-> 请参阅 .js-setupRadio

Answer 1

如果您需要弄清楚事件期间实际更改的内容，请使用 event.target 。您应该能够用您的函数替换警报，并且它应该仅作为单击的元素作为上下文工作。

片段

$(function() {
      var $inputs = $('input');
      $('#set').on('change', $inputs, function(e) {
            var changed = e.target;
            $inputs.each(function(index, element) {
              var ele = this.className;
                  if (this == changed) {
                    alert(ele+index+' has changed');
        }
      });
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="set">
  <input class="chk" type="checkbox">
  <input class="chk" type="checkbox">
  <input class="chk" type="checkbox">
  <input class="chk" type="checkbox">
  <input class="rad" type="radio" name="rad1">
  <input class="rad" type="radio" name="rad1">
  <input class="rad" type="radio" name="rad1">
  <input class="rad" type="radio" name="rad2">
  <input class="rad" type="radio" name="rad2">
  <input class="rad" type="radio" name="rad2">
</fieldset>