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

Bootstrap to hide popover need press button twice

I'm using Bootstrap v3.3.7
I need to click twice to hide a popover.
I have problem like this https://jsfiddle.net/hik200/ejxkv8hb/1/
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false; });

I edited your fiddle, you were adding the click listener once on your button click, which did not actually trigger the close function :
function ClosePopover() {
$("#destroy").click(function(){
$("[data-toggle='popover']").popover('hide');
});
console.log('asd');
}
this is good :
function ClosePopover() {
$("[data-toggle='popover']").popover('hide');
console.log('asd')
}

connect a jquery function to bootstrap's carousel slide event

I created the following function:
//Toggle height of header-foto function
function height_toggler() {
$('body').toggleClass('large-slider small-slider',500);
$('#height-toggler').find('i').toggleClass('fa-rotate-270 fa-rotate-90');
}
I call this function when a user click the button:
// bind the function to a click on the toggler
$('#height-toggler').click( function() {
height_toggler();
});
this works perfectly, you can see it live on this page
My client also wants this function bound on the Bootstrap Carousel's slide event and only on pages with 100% height carousels.
I came up with the following code, but this triggers everytime the carousel slides (which I understand). How can I make it trigger only on the first slide after page load?
if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
$('.carousel').on('slide.bs.carousel', function () {
height_toggler();
});
}

You can use one() method.
if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
$('.carousel').one('slide.bs.carousel', function () {
height_toggler();
});
}

IF you want an event to be executed only once, you can use .one() instead of .on()
if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
$('.carousel').one('slide.bs.carousel', function () {
height_toggler();
});
}

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.

Changing jQuery Event from click to on load

I am using the following onclick function that triggers the object to become full screen when clicked. I want the object to be fullscreen when the page loads without having to click.
fbNav.find('ul li.fullscreen').on('click', function(e){
if(!fullscreen) {
fbFullscreen.show();
fbFullscreen.append(fbCont);
$window.trigger('resize');
} else {
fbParent.append(fbCont);
fbFullscreen.hide();
$window.trigger('resize');
}
fullscreen = !fullscreen;
});
How can i achieve this?

You better put the main logic in a function and call the same function on ready and click.
function fullscreen(){
if(!fullscreen) {
fbFullscreen.show();
fbFullscreen.append(fbCont);
$window.trigger('resize');
} else {
fbParent.append(fbCont);
fbFullscreen.hide();
$window.trigger('resize');
}
fullscreen = !fullscreen;
}
//will be executed when page loads
$(document).ready(function(){
fullscreen();
});
//will be executed on click
fbNav.find('ul li.fullscreen').on('click', function(e){
fullscreen();
});

You can trigger click event on page load.
fbNav.find('ul li.fullscreen').trigger("click");