jQuery调用on()在调用click()后动态生成它

Question

我正在尝试开发一些代码，允许用户通过单击按钮显示/隐藏块级元素。

HTML结构如下

<div class="chat_container"><a class="crm" href="https://google.com" target="_blank">Chat?</a><button id="close_chat">&lt;</button></div>

我已经为#close_chat写了一个click()函数，其中包括将按钮的ID更改为#open_chat。然后在#open_chat上使用on()方法修改各种元素上的一些类和id。这两种方法单独使用时都有效，但结合使用时就不起作用了。我注意到，当我单击#close_chat时，即使ID更改为#open_chat，原始事件仍然附加到按钮。在做了一些搜索后，我怀疑这个问题可能与冒泡事件有关，但现在我不太确定，我仍然将event.stopPopagation()添加到我的点击功能中，我可以看到它似乎被正确调用。我也尝试过使用one()方法，这似乎更接近我在DOM级别期望的行为，但仍然没有工作

我期望的行为是当用户单击#close_chat时调用click()函数，然后取消绑定事件，允许在#open_chat上调用.on()事件。我当然要重置原来的功能。我的代码看起来像这样

$(document).ready(function () {
var close = "<button id='close_chat'><</div>";
var container = $("<div />");
container.addClass("chat_container");
var crmChat = $("<a />");
crmChat.addClass("crm");
crmChat.attr("href", "https://google.com");
crmChat.attr("target", "_blank");
crmChat.text("Chat?");
console.log(crmChat);
console.log(container);


$(container).insertAfter("#heading");
$(container).prepend(crmChat);
$(close).insertAfter(crmChat);


$("#close_chat").click(function (event) {
$("#close_chat").removeAttr("id").attr("id", "open_chat");
event.stopPropagation();
alert(event.isPropagationStopped());
//return false;
});
$(".chat_container").on("#open_chat", "button", function () {
//$(".crm_chat_container").addClass("animate-open").removeClass("animate-close");
$("#open_chat").html(">").removeAttr("id").attr("id", "reopen");
//event.stopPropagation();
});

});

任何帮助都是非常感激的山姆

编辑，我现在已经更新了我的代码看起来像这样

//onclick function for our close button
$("#close_chat").click(function (event) {
attachClosedChatListner();
});
function attachOpendChatListener() {
$(".chat_container").on("click","#open_chat", function () {
$("#open_chat").removeAttr("id").attr("id", "close_chat");
$("#close_chat").html("<")
$(".crm_chat_container").removeClass("animate-close").addClass("animate-open");
});


//attachClosedChatListner();
}
function attachClosedChatListner() {
$("#close_chat").off('click');
$("#close_chat").removeAttr("id").attr("id", "open_chat");
$("#open_chat").html(">")
$(".chat_container").removeClass("animate-open").addClass("animate-close");
//attachOpendChatListener();
}

Answer 1

如何重新附加事件?

$("#close_chat").click(function (event) {
$("#close_chat").removeAttr("id").attr("id", "open_chat");
attachOpenChatListener();
event.stopPropagation();
alert(event.isPropagationStopped());
//return false;
});
function attachOpenChatListener() {
$("#close_chat").off('click');
$(".chat_container").on("#open_chat", "button", function () {
//$(".crm_chat_container").addClass("animate-open").removeClass("animate-close");
$("#open_chat").html(">").removeAttr("id").attr("id", "reopen");
//event.stopPropagation();
});
}

Answer 2

我设法解决了这个问题，点击功能导致了这个问题

//onclick function for our close button
$("#close_chat").click(function (event) {
attachClosedChatListner();
});

我已经把它替换成。on，它现在可以工作了

$(".crm_chat_container").on("click", "#close_chat", function (event) {
$("#close_chat").off('click');
$("#close_chat").removeAttr("id").attr("id", "open_chat");
$("#open_chat").html(">");
$(".crm_chat_container").removeClass("primo-animate-open").addClass("animate-   close");
attachCloseChatListener();
event.stopImmediatePropagation();
});
function attachCloseChatListener() {
$(".crm_chat_container").on("click", "#open_chat", function (event) {
$("#open_chat").off('click');
$(".crm_chat_container").removeClass("primo-animate-close").addClass("primo-animate-open");
$("#open_chat").removeAttr("id").attr("id", "close_chat");
$("#close_chat").html("<");
event.stopImmediatePropagation();
});
}

的事情是我的点击事件似乎是发射多次，这是在点击我的按钮几次后，我看到几个点击事件在开发工具。

不管怎样，谢谢你给我指明了正确的道路