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

tre*_*lez 25 jquery select onchange dynamically-generated

我有一个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>";
}  
Run Code Online (Sandbox Code Playgroud)

填充此列表后,我正在尝试调用更改事件,以便每当在SELECT列表中或在具有相同类的文本字段中更改默认选项时,它将禁用在表单的另一部分中设置的单选按钮.(你可以看到最初的问题,我问来获取工作的功能这一部分在这里)

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

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

有任何想法吗?

mun*_*nch 20

刚评论你的最后一个问题......这就是我所说的:

使用jQuery绑定

function addSelectChange() {
   $('select').bind('change', function() {
       // yada yada
   });
} 
Run Code Online (Sandbox Code Playgroud)

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


Jos*_*ier 7

一个更新的答案..

由于元素是动态填充的,因此您正在寻找事件委派.

但是,不要使用.live()/ .bind()/ .delegate().你应该用.on().

根据jQuery API文档:

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

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

$(document).on('change', 'select', function (e) {
    /* ... */
});
Run Code Online (Sandbox Code Playgroud)


Tap*_*eak 5

使用.live()的示例

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

  • .live()现在已弃用.使用类似`$(document).on("change",'#my_form_id select [name ^ ="my_select_name"]',function(){...}) (3认同)