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

Creating a clickable div within a div

for some reason I cannot make this simple thing to work:
for (var i = 0; i < results.length; i++) {
var object = results[i];
$("#recipes_names").append("<div id =" + "recipe" + i + " >");
$("#recipes_names").append(object.get('recipe_title'));
console.log(object);
console.log(object.id + ' - ' + object.get('recipe_title'));
$("#recipe1").click(function(e) {
e.stopPropagation();
alert("inside click");
});
}
},
I create divs within the "recpie_names" div with the name "recipe0"/"recipe1" etc and I can't for the life of me make them clickable.
I'm sure there's a tiniest of mistakes that I make here but I just can't nail it down.
Can you help me out?

Add a class to the div which is appended and instead of adding event on base of id add just one event on class selector and write just on event:
$("#recipes_names").append("<div class='recipe' id =" + "recipe" + i + " >");
and:
$(document).on("click",".recipe",function(e) {
e.stopPropagation();
alert("inside click");
});

You have to delegates your event
$('#recipes_names').on('click', 'div[id^=recipe]', function(e){
e.stopPropagation();
alert("inside click");
});

It looks like you are generating these divs after the fact. So .click will not work.
Try:
$("#recipe1").on('click', function(e) {
e.stopPropagation();
alert("inside click");
});

Sum values using each()

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

jQuery .click() is triggering when selecting/highlighting text

I have a <div> with a bunch of text in it. This <div> also has a .click() event on it using jQuery.
The problem I'm having is that the .click() is being triggered when selecting/highlighting text. Even holding the mouse down for several seconds before releasing.
Here is a JSFiddle that shows the issue: http://jsfiddle.net/ym5JX/
The behavior that I would expect is that highlighting text isn't the same as clicking on the element.

That's because a click is a mousedown followed by a mouseup. My suggestion is to check getSelection inside the click handler. If it's set, then you selected something, else you just clicked.
$('#click').click(function() {
var sel = getSelection().toString();
if(!sel){
alert("clicked");
}
});​
DEMO: http://jsfiddle.net/ym5JX/3/

As I posted on comment, mosuedown + mouseup = click which is exactly what highlighting does. There is workaround for this.. see below,
var isClick = 0;
$('#click').click(function() {
if (isClick == 1) {
alert("clicked");
}
}).mousedown(function () {
isClick = 1;
}).mousemove(function () {
isClick = 0;
});
DEMO

jsFiddle: http://jsfiddle.net/ym5JX/8/
$('#click').click( function()
{
if ( getSelection() == "" )
{
alert("clicked");
}
});