对动态添加的内容使用jQuery

Question

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

我使用jquery，所以上面描述的代码看起来像这样。

$('table#moderate_users tr').click(function() {

$.get('/moderate/user/'+uid, function(data){

     `$('div.user_info').html(data);`

});

});

这样工作起来很完美，并且内容是动态插入的。我在动态添加的内容中有一个下拉列表(Html select tag)。所以只有当我点击列表中的一个用户时，我才会看到下拉列表，当我点击另一个用户时，下拉列表就会相应地改变。我希望在select标记发生更改时使用jquery找到它的值。所以我写了

$('select#assign_role').change(function(){

alert(this.val());

});

由于此下拉列表是在document.ready之后添加的，因此在document.ready函数中添加此脚本永远不会起作用。我还尝试插入上面的脚本和用户详细信息，这是动态的added.For我很惊讶这个脚本根本没有插入到文档中，而其余的HTML内容插入得很完美。我不知道是否可以在文档加载后添加insert 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中。因此，即使您在页面加载后将事件连接到dropdown，它也不会工作，因为当您将新的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上，live函数不能用于<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，那么live函数工作得很好。