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');
})
Related
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;
}
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
I'm trying to return the sum of values every time one of the select is changed. But the sum is always wrong:
$('select').change(function () {
a = 0;
$('select').each(function () {
a += parseInt($('option:selected').val(), 10);
});
$('h1 span').html(a);
});
http://jsfiddle.net/vAu3E/
$('select').change(function () {
var a = 0;
$('select').each(function () {
a += parseInt(this[this.selectedIndex].value, 10);
});
$('h1 span').html(a);
});
JSFiddle
Use this.value (faster than re-getting a jQuery object when you already have it) and declare a so it's not global (I also invoked the handler immediately so your result shows immediately):
$('select').change(function () {
var a = 0;
$('select').each(function () {
a += parseInt(this[this.selectedIndex].value, 10); //originally this.value
});
$('h1 span').html(a);
}).change();
http://jsfiddle.net/vAu3E/10/
See comments for potential issues with this.value in versions of IE
Using sum plugin , you will have :
$('select').change(function () {
$('h1 span').html($('option:selected').sum());
});
FIDDLE : http://jsfiddle.net/abdennour/vAu3E/18/
NOTE
You use val method since your element is option tag. But , If It is a sum of DIV content elements for example , You must use html method instead of val :
So , the sum plugin still useful :
$('div.operators').sum('html');
I suggest this:
$("select").on("change", function(){
var a = 0;
$("select").each(function(){
a += parseInt($(this).val());
});
$('h1 span').html(a);
});
fiddle
Obviously the result is correct, because you have to substitute "option:selected" with this:
a += parseInt($(this).val(), 10);
If you put "option:selected" the selector is the first selector, instead with $(this) you get the value of each select...
Hope that this comment help you...
Bye
There's an alternative to parseInt; prepending a + will convert a 'numeric` string into a number:
$('select').change(function () {
var a = 0;
$('select').each(function () {
a += +this.value;
});
$('h1 span').html(a);
});
WORKING JSFIDDLE DEMO
Just simply want to limit the number of checkboxes, but actualy my code desallow all checkbox when lengh > 3 , whats wrong..
http://jsfiddle.net/mbAwC/11/
$('.limit :checkbox').change(function () {
var $cs=$(this).closest('.limit').find(':checkbox:checked');
if ($cs.length > 3) {
this.checked=false;$('.limit :checkbox').removeAttr('checked').button( "refresh" );
}
});
regards
Jess
Just remove removeAttr('checked')
$(function() {
$(".limit").buttonset();
$('.limit :checkbox').change(function () {
var $cs=$(this).closest('.limit').find(':checkbox:checked');
if ($cs.length > 3) {
this.checked=false;
$('.limit :checkbox').button( "refresh" );
}
});
});
JSFiddle
$('.limit :checkbox').removeAttr('checked') is wrong. It will uncheck all your checkboxes.
Perhaps you meant $(this).removeAttr('checked') (but you already have this.checked=false)?
Set checked to false, then call button('refresh'):
$(this).prop('checked', false).button('refresh');
Here's a fiddle
Try this way:
$(function () {
$(".limit").buttonset();
var max = 3;
var checkboxes = $('input[type="checkbox"]', '.limit');
checkboxes.change(function () {
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max).button('refresh');
});
});
Demo: http://jsfiddle.net/mbAwC/21/
$('.fav').live('click', function(e){
$(this).toggleClass('highlight');
//increase the number by 1
html:
<li class="fav light_gray_serif">5</li>
how can i use jquery to increase the number between the li everytime its clicked? thanks
var num = parseInt($.trim($(this).html()));
$(this).html(++num)
You want to take a look at .html() or .text(). Here is an example:
$(this).text(function(i, t) {
return Number(t) + 1;
});
HTML:
<span id="counter">0</span>
jQuery:
$('#counter').text(Number($('#counter').text())+1);
You can increase the counter when clicking an existing button like this:
$(document).on('click','#your-button', function(){
$('#counter').text(Number($('#counter').text())+1);
});
Just use a plugin.
(function($) {
$.extend($.fn, {
"addOne": function() {
var num = parseInt(this.text(), 10);
this.text(++num);
},
"subtractOne": function() {
var num = parseInt(this.text(), 10);
this.text(--num);
}
});
}(jQuery))
Then call
$(".fav").live("click", function(e) {
$(this).toggleClass("highlight").addOne();
});