Develop Reference

JQuery $("body").append() not working on "first click"

I was trying to create a lightbox that triggers on a button click. I already have a lightbox that triggers on click on a div in the same document.ready that works perfectly, BUT the one on the button doesn't work the first time I click it. Then, works perfectly. Well, I don't want to create a tooltip that says "please click it twice first time", so how can I fixed?
(If anyone can also explain to me why this happens would be marvelous)
$(document).ready(function () {
//BUTTON CLASS
$(".focosBTN").click(function () {
$("body").append("<div class='img-popup'></div>");
$(".img-popup").click(function () {
$(".img-popup").fadeOut(500, function () {
$(this).remove();
}).addClass("lightboxfadeout");
});
$(".focosBTN").click(function () {
$(".img-popup").fadeIn(500);
});
});
//DIV CLASS
$(".lightbox").click(function () {
let imgsrc = $(this).find('.lightboxImg').attr('src');
$("body").append("<div class='img-popup'><img src='" + imgsrc + "'></div>");
$(".img-popup").click(function () {
$(".img-popup").fadeOut(500, function () {
$(this).remove();
}).addClass("lightboxfadeout");
});
});
$(".lightbox").click(function () {
$(".img-popup").fadeIn(500);
});
});

Semantic ui ready.function() value change by calling onclick

var val;
function imagepop(nval) {
val = nval;
}
$(document)
.ready(function() {
$('.ui.selection.dropdown').dropdown();
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
$('.ui.button')
.popup({
popup: $('.' + val + '.fluid.popup'),
on: 'click'
});
});
I am using this code to button for change val by using this button
<div class="ui primary button" onclick="imagepop(<?php echo$row['idproperty']; ?>)">
I need to change the value when i click on it

.on("hover", ...) chaining not working

I have a js file that has .on("click" , ..) chaining happening that I would like to also add a hover event to. My code is:
}).on('hover' , '.tooltip' , function (e) {
if (e.type == "mouseenter") {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
}else{
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
}
});
I understand that I can really only pass one function this way so I am checking for the event type to trigger the appropriate behavior. This doesn't seem to be working for me. Any ideas?

I think this is what you want
}).on('mouseenter' , '.tooltip' , function (e) {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
});
}).on('mouseleave' , '.tooltip' , function (e) {
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
});

You don't need if (e.type == "mouseenter") {
And hover is not a valid method to use with .on() - I am not sure about this though.. use mouseover or mouseenter
Use it as:
$('.tooltip-holder').on('mouseover' , '.tooltip' , function () {
var tip = $(this).attr('title');
var tipTemp = $(this).attr('data-title', tip);
$('#tooltip').remove();
$(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
$(this).removeAttr('title');
$('#tooltip').fadeIn(300);
});
$('.tooltip-holder').on('mouseout' , '.tooltip' , function () {
$(this).attr('title', $(this).attr('data-title'));
$('#tooltip').fadeOut(300);
$(this).removeAttr('data-title');
});
Fiddle

You can bind several event handlers at once. In your case it will be:
.on('mouseenter mouseleave' , '.tooltip' , function (e) { ... });

As per jQuery source code, hover is not included in the event list that triggered leading to JQuery .on() because .hover() is just a shortcut for JQuery .mouseenter() and .mouseleave(). So, in short, you cannot use hover with .on() like below:
}).on('hover' , '.tooltip' , function (e) {...
So, your option is to use .mouseenter() and .mouseleave() like below:
.on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, '.tooltip');

how change "live" to "on" in this script on jquery for the same functionality

I want to convert jQuery code from live() function to on() function with the same functionality.
If I click to a paragraph is create another one, when I click to span "Delete" the paragraph is removed.
If I change live() to on() the paragraph is created if I click to the first paragraph not each paragraph she was created before.
The demo code is here: http://jsfiddle.net/ny38cLba/6/
HTML code
<body>
<p>Paragraph 1</p>
</body>
JS code
$(document).ready(function() {
var i = 2;
$("p").live("click", function() {
$("<p>Paragraph " + i++ +" <span> Delete</span></p>").insertAfter(this);
});
$("span").live("click", function() {
$(this).parent().remove();
});
});
If I want to hide a paragraph smoothly I use the following code :
$(this).on("click", "span", function(){
$(this).parent().hide("slow",function(){
$(this).remove();
});
})
but after the paragraph is deleted appears instead of a new paragraph.
See in this code: http://jsfiddle.net/a8e9v2m5/2/

This is in doc: http://api.jquery.com/live/
$( document ).on( events, selector, data, handler ); // jQuery 1.7+
so,
$(document).on("click", "p", function() {
$("<p>Paragraph " + i+++" <span> Delete</span></p>").insertAfter(this);
});
$(document).on("click", "span", function() {
$(this).parent().remove();
});

.on() uses a slightly different syntax. Instead of selecting the element you want to watch, select a parent, with a filter selector.
$(document).ready(function(){
var i=2;
$(document).on("click", "p", function(){
$("<p>Paragraph "+ i++ +" <span> Delete</span></p>").insertAfter(this);
})
$(document).on("click", "span", function(){
$(this).parent().remove();
})
})
See the documentation for .on() for more info.

You can use 'on' instead of 'live' but not in the exactly same way when using dynamically generated DOM elements. You will have to bind the selector as well -
See, if this works -
$(document).ready(function () {
var colori = ["AntiqueWhite", "Aquamarine", "BurlyWood", "Chartreuse", "Coral", "DarkSalmon", "DodgerBlue", "GreenYellow", "LightBlue"];
var i = 2;
$(this).on("click", "p", function () {
$("<p>Paragraph " + i++ + " <span> Sterge</span></p>").insertAfter(this);
$(this).next().css("background-color", colori[i])
});
$(this).on("click", "span", function () {
$(this).parent().remove();
});
});

To be more specific to the span that is directly under the p tag
$(document).on("click", 'p', function(){
$("<p>Paragraph "+ i++ +" <span> Delete</span></p>").insertAfter(this);
});
$(document).on("click", 'p span', function(){
$(this).parent().remove();
});

add new div dynamically but click event is not working on new divs

Im trying to make a button so that when I click on it it creates a new button after it then when I click on the next/new button it will create a button after itself but the click event only works on the first button, can you help?
Here is my fiddle = http://jsfiddle.net/hyeFB/
// $(document).ready(function () {
var myDiv = '<div class="myButton">myButton</div>';
$('#c').append(myDiv);
$('.myButton').click(function () {
$(this).after(myDiv);
});
//});​

try using on
var myDiv = '<div class="myButton">myButton</div>';
$('#c').append(myDiv);
$('body').on('click', '.myButton',function () {
$(this).after(myDiv);
});

// $(document).ready(function () {
var myDiv = '<div class="myButton">myButton</div>';
$('#c').append(myDiv);
$('.myButton').live(function () {
$(this).after(myDiv);
});
// Or Use delegation
$('body').delegate('.myButton','click',function () {
$(this).after(myDiv);
});
//});
Would do the trick. http://api.jquery.com/live/ for more info.
Note that live is deprecated starting with jquery 1.7, so the above answer is the more correct one for 1.7+