Develop Reference

The onclick remove affecting other button

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;
}

while loop over takes the each method

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');
})

JQuery append 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

limit checked checkboxes jquery ui easely

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/

Increasing a number by 1 using jquery?

$('.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();
});