Question

我在访问website中附加的元素时遇到问题。这是我的代码：

socket.on('userupdate', function (data) {
    var userslist = [];
    $('#users-list').html('');
    data.forEach(function (item) {
        userslist.push("<a><li id='chat-private' username=" + item.username + " userid=" + item.userid + ">" + item.username + "</li></a>");
    });
    $('#users-list').append(userslist);
});
$("#chat-private").click(function () {
    alert("We have Access!");
});

但没有发生任何事。谢谢。

Answer 1

首先，您希望为chat-private元素提供一个类，否则您将拥有重复的id元素，这些属性无效。

其次，您需要使用委托事件处理程序，因为页面加载时DOM中不存在这些元素。试试这个：

socket.on('userupdate', function (data) {
    var userslist = [];
    data.forEach(function (item) {
        userslist.push("<li class='chat-private' username=" + item.username + " userid=" + item.userid + "><a>" + item.username + "</a></li>");
    });
    $('#users-list').html('').append(userslist);
});
$('#users-list').on('click', '.chat-private', function () {
    alert("We have Access!");
});

另请注意，a元素应位于li内，否则HTML将无效，您可能会出现渲染错误。

Answer 2

在动态创建元素时，您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

即

$(document).on('event','selector',callback_function)

实施例

由于ID必须是唯一的，您应该使用类选择器

//Add class
userslist.push("<li class='chat-private' username=" + item.username + " userid=" + item.userid + "><a>" + item.username + "</a></li>");

//Bind event
$('#users-list').on('click', '.chat-private', function(){
    //Your code
    alert("We have Access!"); 
});

Answer 3

这是因为您首先将点击处理程序附加到＃chat-private（不存在），然后创建div。你可以做两件事来解决你的问题：

在制作div
使用jQuery .on()函数将处理程序附加到所有（包括将来）元素

JQuery：追加后访问动态元素

3 个答案: