jQuery On< select>变更事件未触发 [英] jQuery On <select> Change Event Not Firing

问题描述

我在标题中有以下内容:

I have the following in the header:

$('body').on('change', '#userFilter', function(){
   console.log('changed');
});

当单击选项卡时，此元素将动态插入页面中:

And this element is dynamically inserted on the page when a tab is clicked:

<select id="userFilter">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

问题是，当我更改下拉列表时，控制台中什么都没有显示.

The problem is that when I change the dropdown nothing is shown in the console.

推荐答案

将其包装在 $(document)中. ready(function(){....})，以便将html控件userFilter添加到DOM中，并且可用于javascript

Wrap it in $(document).ready(function(){....}) so that the html control userFilter is added to DOM and available for javascript

$(document).ready(function() {
   $('body').on('change', '#userFilter', function(){
      console.log('changed');
   });
});

保证传递给.ready()的处理程序将在 DOM已准备就绪，因此这通常是附加所有其他内容的最佳位置 事件处理程序并运行其他jQuery代码， jQuery文档.

The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code, jQuery docs.

这篇关于jQuery On< select>变更事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！