Javascript 多个.on（）函数不起作用

所以基本上我想在点击按钮后添加div与联系人，并在点击任何联系人警报信息。它只是模拟从xmpp服务器加载联系人，并在加载后打开聊天的新选项卡。 HTML:

append

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>");
});

---

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

将第二个事件更改为使用body而不是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);
});

第二个问题是，当您单击第一个事件绑定到的“按钮”时，您将创建具有重复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>");
});

$（“按钮”）。在（“单击”，函数（）{
$（“body”）.append（“
test3test3@imserver.soc
testtest@imserver.soc
”；
});

• 将
  更新为

• 将
  更新为

• 将
  更新为

---

将委托事件侦听器绑定到主体后，该代码将不必更改。

感谢您的解释，它现在可以工作了。我将在4分钟内接受。我通常使用文档而不是按钮，但是的，主体本质上是相同的。更新了答案以解决您遇到的另一个问题。您正在创建具有相同ID的多个元素，HTML元素的ID属性必须是唯一的。@CoryDanielson，谢谢。是的，具有相同id的多个元素不是一件好事：）每次单击按钮创建HTML的glob时，都会复制具有相同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>");
});