jQuery body onChange具有多个元素和多个函数

jQuery body onChange with multiple elements and multiple functions

本文关键字：元素 函数 body onChange jQuery      更新时间：2023-09-26

如何限制多个body 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，我不应该运行»）

更新：我必须使用来自主体的事件委派，而不是直接缓存的元素，因为$selectRadio和$selectCheckbox是通过更多的脚本动态添加到页面中的

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

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

如果需要整理事件期间实际更改的内容，请使用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>

我可以通过测试e.target是否具有来自$selectRadios或$selectCheckboxes的类来解决这个问题，并且只在true时运行函数的内容：

$(document).on('change',$setupRadios,function(e){
    var $that = $(e.target);
    if ($that.hasClass('js-setupRadio')){
        // do something and stuff like
        $btnNext.removeAttr('disabled');
        console.log('I should only run if I change $setupRadios')
    }
});
$('body').on('change',$selectCheckboxes,function(e){
    var $that = $(e.target);
    if ($that.hasClass('js-checkbox')){
        // 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');
    }
});
相关文章：