I replaced a div with the clone of another div, now I want to use the same button click events in the cloned div but the events are not working in the replaced div when I am using clone(true), any suggestion?
$(document).ready(function () {
var divClone = $("#col2").clone(true);
$("#bt1").click(function () {
$("#col2").appendTo("#col1");
$('#col3').load("data1.html");
});
$(document).on('click', '.clo', function (e) {
e.preventDefault();
$("#col3").replaceWith(divClone.clone(true));
});
});
Related
I have a issue where the .click from the div where my cancel button is nested in triggers when I click the button. This causes both the slideUp and slideDown to trigger at the same time, which results in the div staying visible. I've tried adding a state to prevent the div from sliding down again, but this does not have the desired effect.
$(add).click(function () {
var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
if(state == 0){
$(inputDiv).slideDown(300);
}
state = 1;
});
$(cancel).click(function () {
var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
$(inputDiv).slideUp(300);
state = 0;
});
https://jsfiddle.net/kkdoneaj/2/
Does anyone know how to work around this issue?
Use Event.stopPropagation() to stop the click from bubbling from the #cancel button to the parent #add div:
$("#cancel").click(function(e) {
e.stopPropagation();
...
});
https://jsfiddle.net/kkdoneaj/3/
you should put stop
Stop the currently-running animation on the matched elements.
$(add).click(function () {
var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
$(inputDiv).stop().slideDown(300);
});
$("#cancel").click(function (e) {
var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
$(inputDiv).stop().slideUp(300);
e.stopPropagation();
});
Others have commented with stopPropagation(), but you can also not expand #inputDiv unless it's already visible, like so:
$(function(){
$("#add").click(function () {
if($("#inputDiv").css('display') == 'none'){
$("#inputDiv").slideDown(1000);
}
});
$("#cancel").click(function () {
$("#inputDiv").slideUp(1000);
});
});
I have a series of divs that reveal on link click. When revealed i'm trying to make them close on background click while maintaining their ability to have the different divs replace each other when different links are clicked.
JS fiddle here: http://jsfiddle.net/t593pyg9/3/
$(document).ready(function () {
$('.toggle').hide();
$('a.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle')
$('.toggle').not(elem).hide();
elem.toggle();
});
});
Listen to clicks on the entire document, to prevent this from closing the "popup" after clicking it's link due to event propagation add a return false; to the show click listener.
$('.toggle').hide();
$('a.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle')
$('.toggle').not(elem).hide();
elem.toggle();
return false;
});
$(document).on('click',function(e){
$('.toggle').hide();
});
Fiddle
Update
If you want to prevent the popup from hiding on clicking on it add this:
$('.toggle').on('click', function (e) {
return false;
});
New Fiddle
i have a link on html
Veja aqui »</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically
Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle
If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});
I have a list which has a jquery handler for a mouse click. I need to place an image within the list, but need a mouse click on the image to perform a different function. I was thinking some sort of unbind on mouseover and bind on mouseout but can not get it to work. Is there an easier method?
The problem I am having is it performs the two clickable events when I click the image.
JS
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function () {
alert("This is a click on the list")
}
});
});
html
<li id="tab" runat="server">Keywords <a class="fake-link" onclick="alert("This is an image click")"><img id="icon" src="images/icon.gif" style="float: right; visibility:visible"/></a></li>
So any ideas how I can only have the alert from the image click? Thanks in advance!
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function (e) {
if($(e.target).attr('id')==='icon')){
//call that function which runs on image click
}
else {
alert("This is a click on the list")
}
}
});
});
Edit: As puppybeard suggested here is another way if you want to have different function to run for all images in the li's
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function (e) {
if($(e.target).is('img'))){
//call that function which runs on image click
}
else {
alert("This is a click on the list")
}
}
});
});
It's hard to do because of event bubbling.
Event namespaces and .on() .off() would help.
For example:
var items = $('#v-nav>ul>li');
var someFunctionToPerform = function() {
alert('Imma list click event');
}
items.on('click.someEventNameSpace', someFunctionToPerform);
items.find('img').on({
'mouseover': function() {
items.off('click.someEventNameSpace');
},
'mouseleave': function() {
items.on('click.someEventNameSpace', someFunctionToPerform);
},
'click': function() {
alert('Imma list image click event!');
}
});
This code will unbind click event for list items after mouseover event on image inside the list and bind them back after mouseleave event on image.
That's probably the hard way, but still it should work. Other answer could be buggy in IE 8- because of different dirrection of event bubbling.
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+