Jquery .change() 函数不适用于动态填充的 SELECT 列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2031826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery .change() function not working with dynamically populated SELECT list
提问by tresstylez
I have a select field that is dynamically populated with an ajax call that simply returns all the HTML select options. Here is the part of the PHP that just echo's the select tags and dynamically fills out each option/value.
我有一个选择字段，该字段使用 ajax 调用动态填充，该调用仅返回所有 HTML 选择选项。这是 PHP 的一部分，它只是回显选择标签并动态填写每个选项/值。
echo "<select name='player1' class='affector'>";
echo "<option value='' selected>--".sizeof($start)." PLAYERS LOADED--</option>";
foreach ($start as $value) {
echo "<option value='".$value."'>".$value."</option>";
}
echo "</select>";
}
After this list is populated, I'm trying to call a change event, so that whenever the default option is changed in the SELECT list or in a text field with the same class, it disables a radio button set in another part of the form. (You can see the initial question I asked to get this part of the functionality working here)
填充此列表后，我尝试调用更改事件，以便无论何时更改 SELECT 列表或具有相同类的文本字段中的默认选项，它都会禁用表单另一部分中设置的单选按钮. （您可以在此处查看我要求使这部分功能正常工作的初始问题）
$('.affector').change(function(){
$(this).parents('tr').find('input:radio').attr('disabled', false);
});
For some reason, even though I give the select field the proper class name (affector), when I select different options in the field, the other parts of the form do not disable. The static text field with the same class works fine. I'm stumped.
出于某种原因，即使我为选择字段指定了正确的类名（影响器），当我在该字段中选择不同的选项时，表单的其他部分也不会禁用。具有相同类的静态文本字段工作正常。我难住了。
Any ideas?
有任何想法吗？
采纳答案by munch
Just commented on your last question...Here's what I said:
刚刚评论了你的最后一个问题......这就是我所说的：
Use jQuery bind
使用 jQuery 绑定
function addSelectChange() {
$('select').bind('change', function() {
// yada yada
});
}
Call addSelectChange in your ajax success function. It should do the trick. Take a look at jQuery live event too (for when you want to set events for all current and future DOM elements in a later project or something). Unfortunately the change event and a few others aren't yet supported with live. Bind is the next best thing
在 ajax 成功函数中调用 addSelectChange。它应该可以解决问题。也看看 jQuery live event（当你想在以后的项目中为所有当前和未来的 DOM 元素设置事件时）。不幸的是，live 尚不支持 change 事件和其他一些事件。绑定是下一个最好的东西
回答by Josh Crozier
A more up to date answer..
一个更新的答案..
Since the elements are dynamically populated, you are looking for event delegation.
由于元素是动态填充的，您正在寻找事件委托。
Don't use .live()/.bind()/.delegate(), though. You should use .on().
不要使用.live()/ .bind()/ .delegate()，虽然。你应该使用.on().
According to the jQuery API docs:
As of jQuery 1.7, the
.on()method is the preferred method for attaching event handlers to a document. For earlier versions, the.bind()method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to.bind()occurs. For more flexible event binding, see the discussion of event delegation in.on().
从 jQuery 1.7 开始，该
.on()方法是将事件处理程序附加到文档的首选方法。对于早期版本，该.bind()方法用于将事件处理程序直接附加到元素。处理程序附加到 jQuery 对象中当前选定的元素，因此这些元素必须在调用.bind()发生时存在。有关更灵活的事件绑定，请参阅 中事件委托的讨论.on()。
Therefore you would use something like this:
因此，你会使用这样的东西：
$(document).on('change', 'select', function (e) {
/* ... */
});
回答by Tapefreak
An example using .live()
使用 .live() 的示例
$('#my_form_id select[name^="my_select_name"]').live('change', (function () {
console.log( $("option:selected", this).val());
})
);
回答by Jason
For items that are dynamically inserted into the DOM, their events must be bound with
对于动态插入到 DOM 中的项目，它们的事件必须与
$('.selector').bind('change',function() { doWork() });
This is because when you run $(function(){});and bind events using $.clickor $.change, etc., you are binding events to elements already existing in the DOM. Any manipulation you do after that does not get affected by whatever happens in the $(function(){});call. $.bindtells your page to look for future elements in your selector as well as current ones.
这是因为当您$(function(){});使用$.clickor$.change等运行和绑定事件时，您将事件绑定到DOM 中已经存在的元素。在此之后进行的任何操作都不会受到$(function(){});调用中发生的任何事情的影响。$.bind告诉您的页面在选择器中查找未来元素以及当前元素。
回答by brian chandley
try .live: http://docs.jquery.com/Events/live
尝试.live：http: //docs.jquery.com/Events/live
From docs: Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.
来自文档：将处理程序绑定到所有当前和未来匹配元素的事件（如点击）。也可以绑定自定义事件。
回答by bboydev
I found as solution to make only
我发现作为解决方案只做
<select id="myselect"></select>
in php/html file and then generate options for it by ajax:
在 php/html 文件中，然后通过 ajax 为其生成选项：
$.post("options_generator.php", function (data) { $("#myselect").append(data); });
In options_generator.php echo options only:
仅在 options_generator.php 回显选项中：
echo "<option value='1'>1</option>";
echo "<option value='2'>2</option>";
回答by Alexander Suleymanov
Use delegate() function instead. More about that here http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/
改用 delegate() 函数。更多关于这里http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/
