Jquery on() 方法在单个元素上绑定 load 事件

Question

如果这个问题已经被问过了，那我很抱歉，但是我没有找到解决方案。

我有3个单选按钮元素，我想在选择改变和页面加载时检查值。

我想只使用on()函数来实现这一点。

我的问题是只有change事件被触发。

这是我的当前代码：

$('.user').on('load change', function(){
  if($(this).val() == 'client'){ 
$('#user_parent').removeAttr('disabled').closest('tr').show(200);
}else{
  $('#user_parent').attr('disabled', 'disabled').closest('tr').hide(200);
}
});"

我还尝试将load替换为ready，但也失败了。问题出在哪里？难道load事件不适用于单个元素吗？

这段代码放置在$(document).ready(...)中，当页面发送时所有元素都显示出来。

谢谢。

- FLX

---

@Cherniv，还有脚本也是。哎呀！ - A. Wolff

@roasted但是input绝对不可能为100%。 - Ivan Chernykh

https://dev59.com/IGoy5IYBdhLWcg3wWsw_ - rahularyansharma

只使用document load函数吗？ - David Fregoli

@loy 这是什么连接？ - Vogel612

Answer 1

当监听的元素的所有子元素加载完毕时，load事件将被调用。在您的情况下，这可能会在ready事件被调用之前发生，从而使您的处理程序无效（该处理程序是附加在document.ready之后的）。

请参考JQuery api，其中您将找到以下内容：

当元素及其所有子元素都已完全加载时，将向元素发送load事件。此事件可以发送到与URL相关联的任何元素：图像、脚本、框架、iframe和窗口对象。

这也意味着您需要一个URL，以便可以监听load事件。由于您未提供进一步的代码，我假设您确实有一个可以监听的URL。

不过，这也可能是最有可能的原因。如果您没有任何URL与（至少一个）子元素关联，则不会有可供监听的load事件。

请尝试这个替代方法：

$(document).ready(function(){
   checkUserVal();
   $('.user').on('change', checkUserVal);
});

var checkUserVal = function(){
  //do the check
  if($('.user').val() == 'client'){ 
     $('#user_parent').removeAttr('disabled').closest('tr').show(200);
  }else{
     $('#user_parent').attr('disabled', 'disabled').closest('tr').hide(200);
  }
};

我把代码变成了一个方法，以提高可读性；）

- Vogel612

---

事实上，只有当元素已准备好/在 DOM 中可用时，才能将处理程序附加到该元素。我可以想到一种情况，即在图像/脚本的 onload 事件之后立即将其附加到此元素标记，并且此元素已被缓存。在这种情况下，我认为您是正确的，onload 事件应在文档就绪之前触发。无论如何，确实是不错的输入+1。 - A. Wolff

谢谢您的回答，做一个像这个解决方案一样的函数还是在文档准备就绪时触发自定义事件更好呢？因为我将多次使用此系统。 - FLX

@Vogel612 根据我之前的评论，即使缓存了，图像的onload事件仍会在文档准备就绪后触发：http://jsfiddle.net/w4zSj/ - A. Wolff

@FC，如果您将重复的任务移入通用函数，则可以大大提高可维护性和概述。这使您能够在面对相同问题时反复重用代码。 - Vogel612

@Vogel612 div 没有任何 onload 事件可以附加。因此，肯定不会触发 onload 事件。 - A. Wolff

Answer 2

正如Vogel612所解释的，对于大多数元素，load事件不会触发。

ready仅适用于document。

您可以使用each来最初运行事件处理程序。

$(document).ready(function(){
  $('.user')
    .each(user_handler)
    .on('change', user_handler);
});

var user_handler = function(){
  // this
};

- Vezquex

Answer 3

<script>
jQuery( 'document' ).on("load ready", function() {
    $('.user').on('change', function(){
        if($(this).val() == 'client'){ 
            $('#user_parent').removeAttr('disabled').closest('tr').show(200);
        }else{
            $('#user_parent').attr('disabled', 'disabled').closest('tr').hide(200);
        }
    });
    // just do this:
    $('.user').change();
    });
</script>

- Hisham Dalal