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

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

将委托的事件侦听器绑定到正文，该代码不必更改。

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

1 个答案: