Question

我是jQuery和javascript的新手。在我的应用程序中，我有一个用户列表。从列表中单击特定用户时，div元素将被动态替换为有关用户的详细信息。单击另一个用户时，我再次使用此用户详细信息替换相同的div元素。因此，一次只能看到一个用户详细信息。

我使用jquery，所以我的代码与上面的描述相似。

$('table#moderate_users tr').click(function() { $.get('/moderate/user/'+uid, function(data){ $('div.user_info').html(data); }); });

这很有效，内容是动态插入的。我在动态添加的内容中有一个下拉列表（html选择标记）。所以我只有当我点击列表中的用户时才会得到下拉列表，当我点击其他用户时，它会分别发生变化。我希望每次更改时都使用jquery找到select标签的值。所以我写了

$('select#assign_role').change(function(){ alert(this.val()); });

由于在document.ready之后添加了此下拉列表，因此在document.ready函数中添加此脚本从未起作用。我还尝试在动态添加的用户详细信息中插入上面的脚本。令我惊讶的是，这个脚本根本没有插入到文档中，而其余的HTML内容都是完美插入的。我不知道我是否可以在文档加载后添加插入javascript。我不知道如何使用jQuery来找出动态添加的select标签的值。感谢。

Answer 1

你想要jQuery的“实时”功能：

$('select#assign_role').live('change',function(){
alert($(this).val());
});

还注意到我将alert(this.val());更改为alert($(this).val());，考虑到jQuery事件处理程序中的this引用了实际的dom元素，而不是jQuery对象。

Answer 2

从代码的外观来看，似乎是在将一大块HTML插入到该div中。因此，即使您在页面加载后将事件连接到下拉列表，它也不起作用，因为当您将新的HTML代码插入div时，将忽略所有事件绑定。尝试在插入HTML的函数内移动代码。像这样：

    $('table#moderate_users tr').click(function() { 
    $.get('/moderate/user/'+uid, function(data){
    $('div.user_info').html(data);
     $('select#assign_role').change(function(){
      alert(this.val());
     });
    });
    });

Answer 3

在IE上，实时函数不适用于<select>元素的onchange。

http://www.neeraj.name/blog/articles/882-how-live-method-works-in-jquery-why-it-does-not-work-in-some-cases-when-to-use-livequery

您需要添加select然后执行setTimeout然后使用jquery.bind类型的功能绑定，或者，我所做的是，当您创建元素时，只需设置直接在那里onchange事件处理程序。

如果您不需要支持IE，那么实时功能效果很好。

在动态添加内容上使用jQuery

3 个答案: