javascript - 多个 .on() 函数不起作用

Question

所以基本上我想在单击按钮后添加带有联系人的 div 并在单击任何联系人警报信息后。它只是为了模拟从 xmpp 服务器加载联系人并在加载后打开新选项卡进行聊天。HTML:<button>append</button>

JQuery:

$("button").on("click", function(){
    $("body").append("<div id='kontakty'><ul><li id='test3-imserver-soc'><div class='roster-kontakt offline'><div class='roster-meno'>test3</div><div class='roster-jid'>test3@imserver.soc</div></div></li><li id='test-imserver-soc'><div class='roster-kontakt offline'><div class='roster-meno'>test</div><div class='roster-jid'>test@imserver.soc</div></div></li></ul></div>");
});

到目前为止，一切正常，联系人已附加到正文，但是当我尝试执行时:

$("#kontakty").on("click", ".roster-kontakt", function(){
    var jid = $(this).find(".roster-jid").text();
    var meno = $(this).find(".roster-meno").text();
    alert(meno + "\n" + jid);
});

它不起作用，但如果我尝试在联系人上执行第二个功能，我想附加用作网站正文(不附加)，它的工作正常。知道为什么会发生这种情况吗？

Answer 1

将第二个事件更改为使用正文而不是 ID。

id="kontakty"在创建事件时尚不存在，因此不会触发。在 DOM 中附加更高层以避免此问题。

$("body").on("click", ".roster-kontakt", function(){
    var jid = $(this).find(".roster-jid").text();
    var meno = $(this).find(".roster-meno").text();
    alert(meno + "\n" + jid);
});

您遇到的第二个问题是，当您单击第一个事件绑定(bind)到的“按钮”时，您将创建具有重复 ID 的同一批 HTML。 ID 必须是唯一的，因此您需要使用类。

$("button").on("click", function(){
    $("body").append("<div class='kontakty'><ul><li class='test3-imserver-soc'><div class='roster-kontakt offline'><div class='roster-meno'>test3</div><div class='roster-jid'>test3@imserver.soc</div></div></li><li class='test-imserver-soc'><div class='roster-kontakt offline'><div class='roster-meno'>test</div><div class='roster-jid'>test@imserver.soc</div></div></li></ul></div>");
});

• 已更新 <div id='kontakty'>至<div class='kontakty'>
• 已更新 <li id='test3-imserver-soc'>至<li class='test3-imserver-soc'>
• 已更新 <li id='test-imserver-soc'>至<li class='test-imserver-soc'>

将委托(delegate)事件监听器绑定(bind)到主体后，该代码无需更改。