Jquery on() 在单个元素上加载事件答案

【问题标题】：Jquery on() load event on a single elementJquery on() 在单个元素上加载事件
【发布时间】：2013-07-01 08:27:39
【问题描述】：

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

我有 3 个 radios 元素，我想在选择更改和页面加载时检查值。

我会只使用 on() 函数来做到这一点。

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

这是我当前的代码：

$('.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);
}
});"

我也尝试用 ready 替换 load，但也失败了。什么问题？ load 事件不是对单个元素可用吗？

代码放在$(document).ready(...)中，页面发送时元素全部显示。

谢谢

【问题讨论】：

@Cherniv ya，脚本太糟糕了
@roasted 但input 100% 没有
stackoverflow.com/questions/8608145/…
只使用文档加载？？
我也试过"$(document).on('ready change', '.user', function(){"。我认为当元素被触发时应用在元素上的加载事件已加载，如文档。

标签： jquery events load

【解决方案1】：

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

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

当一个元素和所有子元素都被完全加载后，加载事件会被发送到该元素。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和窗口对象。

这也意味着你需要一个 URL，这样你就可以监听 load 事件。由于您没有提供更多代码，我假设您确实有一个可以收听的 URL。

这可能是最可能的原因。如果您没有与（至少一个）子元素相关联的任何网址将没有加载事件您可以收听。

试试这个：

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

我使代码成为提高可读性的一种方法；）

【讨论】：

@roasted 谢谢你帮我修好了。有趣的是，他监听的元素的加载事件，可能在准备好之前仍然会被调用，请参阅更新的答案
问题是只有当元素在 DOM 中准备好/可用时，您才能将处理程序附加到元素。我可以考虑这样一种情况，您将 onload 事件附加到该元素标记之后的图像/脚本，并且该元素已被缓存。在这种情况下，我认为您是对的，应该在文档准备好之前触发 onload 事件。无论如何，确实不错的输入 +1
感谢您的回答，是做一个像这个解决方案这样的功能还是让我在文档上触发的自定义事件准备好？因为我会多次使用这个系统。
@Vogel612 在我之前的评论之后，即使缓存，在文档准备好后仍然会触发图像的 onload 事件：jsfiddle.net/w4zSj
@Vogel612 div 没有任何可附加的 onload 事件。所以可以肯定的是，onload 事件不会被触发。

【解决方案2】：

与Vogel612 explained 一样，load 对于大多数元素都不会触发。

ready 仅适用于document。

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

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

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

【讨论】：

【解决方案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>

【讨论】：