I have this function for delete button (to delete based on what i click) and it is working, but when i clicked on other button it does the delete function which
is not supposed to do. how can i prevent affecting the other button?
function myDelete()
{
$(document).on('click', '.item', function(){
$(this).remove();
var sum = 0;
});
}
You would better bind your 'click' event to the particular dom object, rather than to the document object.
Please try this code :
function myDelete()
{
$('.item').on('click', function(){
$(this).remove();
var sum = 0;
});
}
Also, it looks weird to me that you have to wrap this in a function. A simple wrapper (equivalent of "on dom load") should be enough in most cases :
$(function(){
// you code here such as :
$('.item').on('click', function(){
$(this).remove();
var sum = 0;
});
});
It's better to put your function inside $(document).ready(). For deleting clicked button, you can do this:
$(document).ready(functio(){
$(document).on('click', '.item', function(){
$(this).remove();
var sum = 0;
});
});
Or, you can do this:
<button class="item" onclick="myDelete(this)">Button</button>
function myDelete(element)
{
$(element).remove();
var sum = 0;
}
just bind your click event with the class assosiates with it. No need to wrap it with other function.
$('.item').on('click', function(){
$(this).remove();
var sum = 0;
});
<button class="item">Other Button</button>
<button onclick="myDelete(this)">Button</button>
function myDelete()
{
$('.item').remove();
var sum = 0;
}
Related
I want to click on Item1, replace the label "Item1" with "Saved", then fade out the button after 500ms and place back the label "Item1" (saved in var currentText)
If I click the button multiple times it fires too many times. How can I prevent that?
$('body').on('click', ".item", function() {
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
});
});
This could be solved with a simple flag indicating that you are in the process of fading it out.
var isFadingOut = false;
$('body').on('click', ".item", function() {
if (isFadingOut) {
return;
}
isFadingOut = true;
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
isFadingOut = false;
});
});
Note: this solution works globally. So if you have multiple different buttons on screen that you want to be able to fade out simultaneously, this will not work. If that's the case, something more like what #Phiter wrote would be better.
I'd do something like this:
$('body').on('click', ".item", function() {
if ($(this).data('off')) return;
$(this).data('off', true);
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
$(this).data('off', false);
});
});
The function will not execute while the button has the off data. Kinda like Mike's answer but without the global variable.
Can use not(':animated'). The :animated pseudo selector is used internally by jQuery and is only active when an animation is in progress
$('body').on('click', ".item", function() {
var currentText = $(this).text();
$(this).not(':animated').text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
});
});
I am adding element to page using the static number according to the click of user. so the element has the serial number according to the user click.
when user click on any of the element and deletes, i need to re-arrange the serial number. i try using the each operator with while loop, but not working.
any one suggest me the right way pelase.
here is my try:
var num = this.clipsLength, clipNum=1;
while(this.clipsLength > 0){
$.each(this.collection.pages, function(index, page) {
$.each(page, function(n, cs) {
var title = $(cs).find('span.text');
title.html('Clipping' + clipNum); //always 0 or all clips are '0'
});
});
--this.clipsLength;
clipNum = num-this.clipsLength;
}
for the try here is the fiddle:
Live Demo
do you mean something like reset the number?
http://jsfiddle.net/Lgwow5pt/2/
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
$('span').each(function(i, item){
item.lastChild.textContent = i+1;
});
Demo
Try this
var htmlT = '<span>x</span>';
i=1;
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
i = 1;
$('#content span').each(function() {
$(this).html('<a class="remove" href="#">x</a>'+i);
i++;
});
})
$('.add').click(function () {
$('#content').append($(htmlT).append(i));
i++;
});
Here it works
I modified your fiddle.
http://jsfiddle.net/khaleel/Lgwow5pt/7/
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
var l= $("#content").find('span').length;
$('#content').empty();
i=1;
for(var j=0;j<l;j++){
$('#content').append($(htmlT).append(i));
i++;
}
})
Hope you accept the solution
Well ..according to your fiddle i tried to resolve the issue. Hope this helps.
change the click event on .remove with the following:
$('#content').on('click', '.remove', function () {
j=i-2;
i=1;
$(this).parent().remove();
$("#content").html("");
for(k=0;k<j;k++)
$('.add').trigger('click');
})
I have a strange problem with JQuery when I try to click on append element that is inside timeout function
I got the following code:
function generate(){
box = shuffle(box);
console.log(box);
$("#game").empty();
for (var i = 0; i < 4; i++) {
$("#game").append("<div class=box>" + box[i] + "</div>");
}
}
function lvl1(){
box = shuffle(box);
console.log(box);
$("#game").empty();
for (var i = 0; i < 4; i++) {
$("#game").append("<div class=box>" + box[i] + "</div>");
}
}
generate();
setTimeout(function(){
lvl1();
}, 1000);
$(".box").click(function(){
alert("OK");
});
If I try to click on box within a 1 sec the alert is showed correctly but if I try to click after the timeout it does nothing also no error is showing
http://jsfiddle.net/f4kgvaL5/
The .box elements are being appended dynamically, so you need to use a delegated event:
$("#game").on('click', '.box', function () {
alert("OK");
});
Updated fiddle
This looks like an event delegation issue. On the new boxes created during lvl1 you arnt assigning the event handler again.
Try
$( "#game" ).on( "click", ".box", function(){
alert("OK");
});
see the code:-
$(document).on("click",".box",function(){
alert("OK");
});
working example:-
http://jsfiddle.net/f4kgvaL5/2/
thanks
$('#filter').on('click', function(){
$('#sort').off('click');
console.log($(this));
});
$('#sort').on('click', function(){
$('#filter').off('click');
console.log($(this))
});
$('.close').on('click', function () {
console.log($(this));
$('#sort').on('click');
$('#filter').on('click');
});
Why doesnt the div .close give back the on method to the divs above if they have the same selector id?
EDIT: For clarity, I'm wanting to temporarily remove the on event on whichever of the two elements wasn't clicked (#filter or #sort). Then clicking '.close' will return the said element back to having the on method again.
The off() does not work the way you think. It actually removes the event handlers (callback functions), not just hides them, so you cannot restore them with a simple on(), they are not stored any longer by the element after the off(), you have to add them again. It is not easy to track whether an event handler is added, so I suggest another approach.
var sort = true;
var filter = true;
$('#filter').on('click', function(){
if (!filter)
return;
sort = false;
console.log($(this));
});
$('#sort').on('click', function(){
if (!sort)
return;
filter = false;
console.log($(this))
});
$('.close').on('click', function () {
console.log($(this));
sort = true;
filter = true;
});
Another approach to use toggle() and combine it with the on() and off() functions. Hmm I found that jquery toggle() is not loosely coupled to dom elements, so you cannot do this with that. You have to create your own implementation, for example something like this:
function toggle(options) {
var currentValue = !!options.value;
return function (value){
if (value === undefined)
value = !currentValue;
if (value != currentValue)
if (value) {
currentValue = true;
options.on();
}
else {
currentValue = false;
options.off();
}
};
}
With this toggle implementation your code will be the following:
var switches = {
sort: toggle({
on: function (){
$('#sort').on('click', function(){
switches.filter(false);
console.log($(this))
});
},
off: function (){
$('#sort').off('click');
}
}),
filter: toggle({
on: function (){
$('#filter').on('click', function(){
switches.sort(false);
console.log($(this));
});
},
off: function (){
$('#filter').off('click');
}
})
};
$('.close').on('click', function () {
console.log($(this));
switches.sort(true);
switches.filter(true);
});
switches.sort(true);
switches.filter(true);
You can try with:
$('#filter:not(.off)').on('click', function(){
$('#sort').addClass('off');
console.log($(this));
});
$('#sort:not(.off)').on('click', function(){
$('#filter').addClass('off');
console.log($(this))
});
$('.close').on('click', function(){
$('#sort').removeClass('off');
$('#filter').removeClass('off');
console.log($(this));
});
I'm assuming that in your block of code…
$('.close').on('click', function () {
console.log($(this));
$('#sort').on('click');
$('#filter').on('click');
});
You want to click #sort and #filter. To do such, you'll need to do the following:
$('.close').on('click', function () {
console.log($(this));
$('#sort').click();
$('#filter').click();
});
Even so, it would probably be better to wrap the other event handlers in a function and call them like such:
$('.close').on('click', function () {
console.log($(this));
sortClickFunction();
filterClickFunction();
});
This will do anything: $('#sort').on('click');
You need to call: $('#sort').trigger('click');
I have a table that is generated by a Kendo Scheduler.
I have to add a click function on each td on document load.
For now, I have tried this:
$(document).ready(function () {
$('td.k-nonwork-hour').click(function () {
alert("Hello");
});
});
For adding a onclick function. I have also tried with onclick
$(document).ready(function () {
$('td.k-nonwork-hour').onclick =function () {
alert("Hello");
};
});
But none of them works. Anyone knows a solution? :)
Better use delegated event instead of attaching event handler to each cell.
e.g.
scheduler.wrapper.on("click", "td.k-nonwork-hour", function() {
alert("Non working day!")
});
Here is live example.
scheduler.wrapper.on("mouseup touchend", ".k-scheduler-table td, .k-event", function(e) {
var target = $(e.currentTarget);
if (target.hasClass("k-event")) {
var event = scheduler.occurrenceByUid(target.data("uid"));
scheduler.editEvent(event);
} else {
var slot = scheduler.slotByElement(target[0]);
scheduler.addEvent({
start: slot.startDate,
end: slot.endDate
});
}
});