Question

我有一个select字段，该字段使用ajax调用动态填充，该调用只返回所有HTML选择选项。这是PHP的一部分，它只是回显select标签并动态填充每个选项/值。

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>";
}

填充此列表后，我正在尝试调用更改事件，以便每当在SELECT列表中或在具有相同类的文本字段中更改默认选项时，它将禁用在另一部分中设置的单选按钮形式。（您可以看到我要求使这部分功能正常工作的初始问题here）

$('.affector').change(function(){
       $(this).parents('tr').find('input:radio').attr('disabled', false);
});

由于某种原因，即使我给select字段指定了正确的类名（affector），当我在字段中选择不同的选项时，表单的其他部分也不会禁用。具有相同类的静态文本字段工作正常。我很难过。

有什么想法吗？

Answer 1

刚刚评论了你的上一个问题......这就是我所说的：

使用jQuery bind

function addSelectChange() {
   $('select').bind('change', function() {
       // yada yada
   });
}

在ajax成功函数中调用addSelectChange。它应该做的伎俩。看一下jQuery live事件（当你想在以后的项目中为所有当前和未来的DOM元素设置事件时）。不幸的是，现场还不支持更改事件和其他一些事件。绑定是下一个最好的事情

Answer 2

_{更新的答案..}

由于元素是动态填充的，因此您正在寻找event delegation。

不要使用.live() / .bind() / .delegate()。您应该使用.on()。

根据jQuery API docs：

从jQuery 1.7开始，.on()方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind()方法用于将事件处理程序直接附加到元素。处理程序附加到jQuery对象中当前选定的元素，因此这些元素必须存在于发生.bind()的调用时。有关更灵活的事件绑定，请参阅.on()中有关事件委派的讨论。

因此你会使用这样的东西：

$(document).on('change', 'select', function (e) {
    /* ... */
});

Answer 3

使用.live（）

的示例

$('#my_form_id select[name^="my_select_name"]').live('change', (function () {
    console.log( $("option:selected", this).val());
    })
 );

Answer 4

对于动态插入DOM的项目，其事件必须与

绑定

$('.selector').bind('change',function() { doWork() });

这是因为当您运行$(function(){});并使用$.click或$.change等绑定事件时，您将事件绑定到DOM中已存在的元素。在此之后进行的任何操作都不会受到$(function(){});调用中发生的任何操作的影响。 $.bind告诉您的页面在选择器中查找未来元素以及当前元素。

Answer 5

尝试.live： http://docs.jquery.com/Events/live

来自docs：将处理程序绑定到所有当前和未来匹配元素的事件（如单击）。也可以绑定自定义事件。

Answer 6

我发现只有

的解决方案

<select id="myselect"></select>

在php / html文件中，然后通过ajax为它生成选项：

$.post("options_generator.php", function (data) { $("#myselect").append(data); });

仅限options_generator.php中的echo选项：

echo "<option value='1'>1</option>";
echo "<option value='2'>2</option>";

Answer 7

改为使用delegate（）函数。关于这一点的更多信息http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Jquery .change（）函数无法使用动态填充的SELECT列表

7 个答案: