We Keep Coding

jQuery calling on() on dynamically generated it after calling click()

I am trying to develop some code to allow the user show/hide a block level element by clicking a button.
The HTML structure is like below
<div class="chat_container"><a class="crm" href="https://google.com" target="_blank">Chat?</a><button id="close_chat"><</button></div>
I have written a click() function for #close_chat which amongst other things changes the ID of the button to #open_chat. I then use the on() method on #open_chat to modify some classes and ids on various elements. In isolation both these methods work, however when combined they don't work. I have noticed that when I click #close_chat even though the ID changes to #open_chat the original event is still attached to the button. After doing some search I suspected the issue might have been related to events bubbling up, but now I am not so sure, still I added event.stopPopagation() to my click function and I can see it appears to be called correctly. I have also tried using the one() method, this appeared to get closer to the behavior I was expecting at the DOM level but still didn't working
My expected behavior is the click() function is called when the user clicks #close_chat, the event is then unbound allowing the .on() event to be called on #open_chat. Id than of course have to reset the original functionality. My code looks like this
$(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();
});
});
any help is greatly appreciated
Sam
edit, I have now updated my code to look like so
//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();
}

What about re-attaching the event?
$("#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();
});
}

I managed to work this out, the click function was causing the problem
//onclick function for our close button
$("#close_chat").click(function (event) {
attachClosedChatListner();
});
I've replaced it with .on and it works now
$(".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();
});
}
on thing is my click events appears to be firing multiple times, that is after clicking my buttons a few times I see several click events in dev tools.
Anyway, thanks for putting me on the right path

jquery javascript click function from within a function

I have an external JS file that contains the following jQuery code:
var globalNames = { next: 'input[name="next"]'};
var globalElements = { next: $e.find(globalNames.next) };
initQuiz: function() {
globalElements.next.click(function () {
if (y.forcingQuestionSolve && !j[c.index()] && (y.quizSummeryHide || !y.reviewQustion)) {
alert(WpProQuizGlobal.questionNotSolved);
return false
}
i.methode.nextQuestion()
}
);
the globalElements.next.click function is triggered by a click on a button:
<input type="button" name="next" value="Next" class="Button" ">
What I would like to do is call this p.next.click function from a Input Checkbox click.
I have added the following code:
<script>
$(document).on("click", "input[class='questionInput']", function () {
alert("Thanks for checking me");
// This is the line I'm not sure off !?!?
$('next').trigger('click');
});
</script>
As you can see, I have tried to call the trigger event but its not working.
I have to note that the 2 jQuery statements are not combined in document, they are separate.
EDIT: Added Correct Variables (global*)

Hi i think you only forgot to dedicate the button which has to be triggered.
<script>
$(document).on("click", "input[class='questionInput']", function () {
alert("Thanks for checking me");
// This is the line I'm not sure off !?!?
$('[name=next]').trigger('click');
// $('.Button').trigger('click');
});

thanks everyone.. I used the following code from Calvin Nunes-
$("[name='next']").trigger('click');
Craig.

Trigger an event when a div is populated/visible

I want to trigger an event once a DIV is populated from the back, 2 nodes are inserted in my DIV. I'm using this:
$(function () {
var xml = document.querySelector('#XML');
xml.addEventListener("DOMNodeInserted", function (ev) {
doSomething();
}, false);
});
This works when the XML div is populated once the doc is loaded or reloaded.
At some point, the user clicks a button and the div#XML is populated dynamically without a reload and even though a DOM node is inserted into my element, nothing happens.
How can I trigger "doSomething()" when my div changes?

Your code works fine. Like you can see in Mutation events and the relative compatibility HERE:
$(function () {
$('#XML').on("DOMNodeInserted", function (ev) {
console.log('DO SOMETHING');
});
$('#btnAdd').on('click', function(e) {
$('#XML').append($('<p>', {text: 'this is a new paragragh'}));
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="XML"></div>
<button id="btnAdd">Add a paragragh to div</button>

Following code might be the one you looking for. It will look for changes in your div every 1000 milliseconds, you can change that according to your requirements. If your div has some text initially then update the oldVal accordingly.
$('#XML').change(function(){
alert("div has changed!");
// replace with your actions
});
var oldVal = "";
function InputChangeListener()
{
if($('#XML').val() != oldVal)
{
oldVal = $('#XML').val();
$('#XML').change();
}
}
setInterval(InputChangeListener, 1000);

How to do .click() on added class in JQuery?

I am trying to create a simple edit function on a button. When the user clicks the the Edit Button (containing the following classes btn btn-primary btn-edit change-btn), the text will change to "Save", the readonly attributes will be removed on the input elements, and will have a class btn-success save-btn at the same time removing the edit-btn btn-primary class. So that when the user clicks the button again, it will update and save the data. Although it removes and successfully changes the classes, the save-btn function wont work even with a simple "hello" alert. Here is my code:
$(document).ready( function() {
$('.save-btn').click(function () {
alert('hello');
});
$('.edit-btn').click(function () {
$('.change-btn').removeClass('btn-primary edit-btn').addClass('btn-success save-btn').text('Save');
$('#firstname, #lastname').removeAttr('readonly');
});
});
Is there something wrong of my execution of the javascript/jquery here?

It doesn't work because when you are adding the save-btn click handler that class isn't on the button yet. Try to use delegates.
$(document).ready( function() {
$(document).on('click', '.save-btn', function () {
alert('hello im clicked');
});
$(document).on('click', '.edit-btn', function () {
$('.change-btn').removeClass('btn-primary edit-btn').addClass('btn-success save-btn').text('Save');
$('#firstname, #lastname').removeAttr('readonly');
});
});
You can use the parent of the button instead of the document.

Hidden Divs - Jquery Closing and Efficiency

I'm trying to create multiple divs that can be closed with the click of a button. Being a novice at jquery, I'm sure there are better ways to do this.
My question is:
Are there better ways to do this?
EDIT: Is there a way to only have one div open and cancel out and already open one in the case a user does not close it??
//hidden divs
$(document).ready(function () {
$(".x").click(function () {
$("#tcm_content").hide();
});
});
$(document).ready(function () {
$(".x").click(function () {
$("#bazinga_content").hide();
});
});
//thumbnails
$("#tcm").click(function () {
$("#tcm_content").show("600", function () {});
});
$("#bazinga").click(function () {
$("#bazinga_content").show("600", function () {});
});
Here's my fiddle: http://jsfiddle.net/0t6uqwLm/13/

You can close multiple divs in a click event like this
$(document).ready(function () {
$(".x").click(function () {
$("#bazinga_content").hide();
$("#tcm_content").hide();
});
});
And you dont need to use multiple document.ready functions. You can actually use one document.ready and put everything into it.
Working JsFiddle here https://jsfiddle.net/0t6uqwLm/10/
New JsFiddle for the update made in question https://jsfiddle.net/0t6uqwLm/12/

$(document).ready(function () {
$(".x").click(function () {
$("#tcm_content").hide();
$("#bazinga_content").hide();
});
});
//thumbnails
$("#tcm").click(function () {
$("#tcm_content").show("slow");
});
$("#bazinga").click(function () {
$("#bazinga_content").show("slow");
});

Everything should go into the ready function, and you only need one click handler for the x class
$(document).ready(function () {
$(".x").click(function () {
$("#tcm_content").hide();
$("#bazinga_content").hide();
});
//thumbnails
$("#tcm").click(function () {
$("#tcm_content").show("600", function () {});
});
$("#bazinga").click(function () {
$("#bazinga_content").show("600", function () {});
});
});
As to what is better, this is a perfectly acceptable way to show and hide div's using jQuery.
To clarify, jQuery uses selectors to get at the specific elements on the page that you want. When you call $("#tcm").click... jQuery goes looking for that element with the id="tcm". If it has not loaded into the DOM yet, there will be no element to attach the click event to. That is why they should go into the ready function, because it does not get called until the document has loaded all of the elements.