如何在Jquery中更改动态生成的元素的HTML内容

Question

我很久以前就知道，对于动态添加的内容，必须使用$(document).on('click','[ID]', function(){});附加侦听器和事件，如click和focus $(document).on('click','[ID]', function(){}); ....等

但是，我要做的是更改已动态添加的特定元素的HTML值。

例如，我使用此代码添加元素：

$('.friend_chooser_pop').html("<div id='#friend_chooser_list'></div>"); 

现在我如何访问#friend_chooser_list并设置其HTML值？ 这些都不起作用：

$('#friend_chooser_list').html('something');
document.getElementById('friend_chooser_list').innerHTML = 'something';

Answer 1

这应该有用，你的问题是你在你的id中加了一个# ，这里不需要。

这会奏效。

$('.friend_chooser_pop').html("<div id='friend_chooser_list'></div>");
$('#friend_chooser_list').html('something');

如果您打算在ID中包含#并且您希望它工作，您可以像这样使用它：

$("#\\#friend_chooser_list").html('something');

它正在逃避#并允许jQuery无论如何都能获得正确的元素。 我不推荐这个，它可以很快混淆。

Answer 2

向页面动态添加元素时，必须刷新事件侦听器。

您应该将所有事件侦听器分组到一个函数中：

function bindEvents(){
    $('*').off();

    $('a.fonction').click(function(){
        /* ... */
    }
}

第一行（.off（））删除页面上的所有侦听器（* =所有元素，就像在CSS中一样）。

然后在更改页面内容时调用此函数。

玩得开心 ！

Answer 3

$('.friend_chooser_pop #friend_chooser_list').html('something');

您可以给它父上下文并更改$('.friend_chooser_pop').html("<div id='#friend_chooser_list'></div>"); to $('.friend_chooser_pop').html("<div id='friend_chooser_list'></div>"); ，以便在DOM中为jQuery可见