We Keep Coding

why does jQuery's .html("abc") only insert temproarily?

i have an html button that calls a function, however when the buttons clicked, the inserted div only appears for a second and then disappears, both visually and in the html tree.
function openBox () {
$( '#0' ).click( function () {
var container =
$( "<div>" ).css({
height : "200px",
width : "200px",
position : "absolute",
"background-color" : "black",
});
$( 'button.box' ).html( container );
});
}
if i insert the div created in JS into 'button.box' it displays only temporarily, for a split second. the html looks as such:
<div class="holder">
<button id="0" class="box fa fa-paint-brush"></button>
</div>
but if inserted into 'div.holder' with the same html structure however, the box displays continuously as expected, but the button is gone.
What is the reason for the button disappearing with continuous display of box & the temporary display of box in their respective circumstances, and what can be done about the button disappearing?

When adding the new container to the .holder class, the button disappears because the .html() method is replacing the content in the selected element. In order to add the box and keep the button, .append() is the appropriate jQuery method.
The code below implements what I understand to be the desired outcome; the new div appearing after the button. The new <div> is appended to the existing <div>, after the button by using $("button").parent() to select the existing <div>. Appending the new <div> to the button itself $("button").append() will add the div to the inside of the button.
<div class="holder">
<button id="0" class="box fa fa-paint-brush" type="button"></button>
</div>
<script>
$(document).ready(function(){
$('#0').click( function () {
var container = $( "<div>" ).css({
height : "200px",
width : "200px",
position : "absolute",
"background-color" : "black",
});
$(this).parent().append( container );
});
});
</script>
More information about the jQuery append method, and others, can be found in their documentation: http://api.jquery.com/append/

JQuery data attribute used for multiple popups but to trigger a specific one on mouseleave

jquery
function initPopup() {
//----- OPEN
$('[data-popup-open]').on('click', function (e) {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function (e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
}
$(document).ready(function () {
initPopup();
});
Above is my jquery code that is used to show specific popup data using an attribute.
HTML
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<h2>TEST</h2>
<p>TEST</p>
<p>TEST</p>
<a data-popup-close="popup-1" href="#" class="close">Close</a>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
<div class="popup" data-popup="popup-2">
<div class="popup-inner">
<h2>TEST</h2>
</div>
<a data-popup-close="popup-2" href="#" class="close">Close</a>
<a class="popup-close" data-popup-close="popup-2" href="#">x</a>
</div>
I would like it so that on a mouseleave event of body that it shows the data-popup="popup-2"
I am very new to jquery but like jumping into the deep end, if you are able to suggest a better way/different way to do this I am happy to learn.
Thanks for taking the time to read.
George

If what you want is to bind a mouseleave event on the html body (I do not understand your use case) what you can do is the following:
$("body").on("mouseleave", function() {
$("[data-popup='popup-2']").show();
});
$("body").on("mouseenter", function() {
$("[data-popup='popup-2']").hide();
});
This code will reset the state, that mean it will not preserve the opened popup when the mouse reenter the body. If you want to preserve the state, an easy way to do this could be:
var isPopupShown = $"([data-popup='popup-2']").is(":visible");
$("body").on("mouseleave", function() {
isPopupShown = $"([data-popup='popup-2']").is(":visible");
$("[data-popup='popup-2']").show();
});
$("body").on("mouseenter", function() {
$("[data-popup='popup-2']").show();
if (!isPopupShown) {
$("[data-popup='popup-2']").hide();
 }
});
This code will show the popup-2 when the mouse leave the body, and restore the original state when the mouse is inside the body (has not been tested, but thats the idea).
There is many way to achieve a popup, personnally i only use css (js is not needed for a simple popup) for simple case. You can create a piece of reusable css and just reproduce the html structure:
HTML:
<label for="foobaz">click here</label>
<input type="checkbox" class="hide popup-controller" id="foobaz"/>
<div class="popup" id="popup1">
<div>foo</div>
</div>
CSS:
.popup-controller {
display: none;
}
.popup {
display: none;
}
.popup-controller:checked + .popup {
display: block;
}
/** This show the popup if the mouse is out the body **/
body:not(:hover) #popup1.popup {
display: block;
}
using this you are free of js (associated jsbin).
Using this code, if the input is checked or the mouse is not in the body, it will show the popup. You just have to use the same html structure to have the same effect on others popup.
Using this, you can control the popup in JS using trigger on the checkbox.
If you are really into JS, i would recommend to create an object and make a code where you specify "popup-1" less as possible. You can do this easily:
$( ".popup" ).on( "click", function( event ) {
if ($(event.target).is('.close')) {
$(this).hide();
event.stopImmediatePropagation();
event.preventDefault();
}
});
In this case, even if you have many "close" inside your popup, it will close the popup, without the need of specifying popup-1 (you can keep your open code).

Add to pop-up you want to close on leave, another data-attribute something like data-bodyclose (or mettere name). Then in body event, check if the .popup has that attribute, if true close It (maybe better trigger event of data-close-popup child)

How to create onClick function for a dynamically generated div

I am trying to implement onClick function for a div which is getting generated depending on some validations while submitting the page. I am trying to implement the same from an external js file.
HTML design is something like :
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
//dynamically generated
<div>
---
----
</div>
</div>
Now, I am trying to implement the onClick function like below :
$('img.popUpClose.popUpCloseQview').each(function (index) {
$(this).on("click", function (e) {
//DO something
});
});
But the issue is, this $('img.popUpClose.popUpCloseQview') element is not there in the code on the first time. After the submit button click valiations are happening and depending on the condition this pop up message is coming up and this function is not working anytime.
Tried some other options too. But none of these are working.
Please advise.
Thanks,
Aniket

If you are dynamically generating the div in jquery, you can add the click event then. For example:
var div = $("<div>");
div.click(function(){//dostuff});
$("#QViewInfo").append(div);

You could attach the click event to all the div's of element #QViewInfo using event delegation on() like :
$('#QViewInfo').on('click', 'div', function(){
//DO something
})
NOTE : No need for using each() loop.
Hope this helps.
$('#QViewInfo').append('<div>Div 3</div>');
$('#QViewInfo').on('click', 'div', function(){
console.log($(this).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
<div>Div 1</div>
<div>Div 2</div>
</div>
Working snippet with comment code :
var img = '<img src="/Images/...." onclick="alert(\'QView.close();\')" alt="Close Quick View" class="popUpClose popUpCloseQview">';
$('.oosInfo').append(img);
$('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){
alert("A");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo">
<div class="oosInfo">
<div class="alertImgDiv">
<span class="oosAlertImg"></span>
</div>
</div>
</div>

close button for jquery popup box

I am using this code for popup box and it's work well
$(document).ready(function() {
// Here we will write a function when link click under class popup
$('a.popup').click(function() {
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
});
and it's my HTML code:
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<h2>Content Demo 1</h2>
<p>Check out WebDesignersDesk for more tutorials</p>
</div>
</div>
<div id="fade"></div>
but my popup box close only when click outside popup box but i want add a close button in my box and when click it close my box. how can do it?

Try this..
HTML:
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<h2>Content Demo 1</h2>
<p>Check out WebDesignersDesk for more tutorials</p>
</div>
<div class="closepopup">Close</div>
</div>
<div id="fade" class="fade"></div>
Javascript:
$('.closepopup').on('click', function(e) {
$('.popupbox').fadeOut();
$('.fade').fadeOut();
});

JQuery: show div below pushed button

How can I show the div-element below the pushed button?
html:
<button id="one" class="btn">One</button>
<button id="two" class="btn">Two</button>
<button id="three" class="btn">Three</button>
<div id="popup">Message!</div>
JS:
$('.btn').click(function(e) {
const targetBtn = e.target;
$("#popup").show("slow").delay(3000).hide("slow"); //HOW TO SHOW IT BELOW TARGET BUTTON
})

Because your div has an id not class so you have to use # notation for ids:
$('.btn').click(function (e) {
$("#popup").css({
'position': 'absolute',
'left': $(this).offset().left,
'top': $(this).offset().top + $(this).height() + 5
}).show("slow").delay(3000).hide("slow");
});
Demo

Not sure if your button is allready visible or not before you want to replace it. But this puts the div after the clicked button:
$("button").click(function(){
$("#popup").insertAfter($(this));
});
http://jsfiddle.net/6FLLt/
If you want to show() it use
$("button").click(function(){
$("#popup").show().insertAfter($(this));
});
http://jsfiddle.net/6FLLt/2/
UPDATE
If you want to place the message below the buttons visually you have to change to html and CSS like so:
HTML
<div class="relative">
<button id="one" class="btn">One</button>
</div>
<div class="relative">
<button id="two" class="btn">Two</button>
</div>
<div class="relative">
<button id="three" class="btn">Three</button>
</div>
<div id="popup">Message!</div>
CSS
#popup{position:absolute; bottom:-20px; display:none;}
.relative{position:relative; float:left;}
http://jsfiddle.net/6FLLt/5/

try something like this
$('.btn').click(function(e) {
$(this).after($('#popup'));
})
Note : User # for id and .(dot) for class

How can I show the div-element below the pushed button?
Set the margin of the div accordingly (to show the div directly below the pushed button):
$('.btn').click(function(e) {
var $elem = $(e.target),
$div = $('#popup');
$div.css('margin-left', $elem.offset().left + 'px');
$("#popup").stop().show("slow").delay(500).hide("slow");
})
Demo: http://jsfiddle.net/abhitalks/5ef5L/
Note: You should .stop() before attempting the animation, because when you click another button, the earlier animation might still be underway, hence giving unexpected results.
Aside: You need to use the $('#...') selector, because popup is an id.