Toggle Increment and decrement count on single element click - javascript

I have a element which has an integer count.
<span class="likes-count"> 2 </span>
And a div when clicked have to toggle the increment and decrement of the value.
<div class="liked"></div>
Problem:
I have called a function on $('.liked').clicked which increments the value and changes the class to .notliked
And another onclick function decrements the value, but it's not working properly.
Please review my code. I guess this is not the best way to do this.
Here's my demo code.
$(document).ready(function() {
$(".notliked").click(function() {
var $this = $(this);
$this.removeClass('notliked');
$this.addClass('liked')
$count = $('.likes-count');
$count.html((parseInt($count.html(),10) || 0) + 1);
});
$(".liked").click(function() {
var $this = $(this);
$this.removeClass('liked');
$this.addClass('notliked');
$count = $('.likes-count');
$count.html((parseInt($count.html(),10) || 0) - 1);
});
});
.heart {
color: #fff;
height:50px;
cursor:pointer;
width:50px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span class="likes-count"> 2 </span>
<div class="liked heart">Click</div>

You need to delegate the click event. At the beginning $(".notliked") returns 0 elements and so it's never executed.
In order to increment/decrement the text value you can use:
.text( function ) like:
$count.text(function(idx, txt) {
// convert text to number and increment by one
return +txt + 1;
});
The snippet:
$(document).on('click', ".notliked", function() {
var $this = $(this);
$this.removeClass('notliked');
$this.addClass('liked')
$count = $('.likes-count');
$count.text(function(idx, txt) {
return +txt + 1;
});
});
$(document).on('click', ".liked", function() {
var $this = $(this);
$this.removeClass('liked');
$this.addClass('notliked');
$count = $('.likes-count');
$count.text(function(idx, txt) {
return (+txt == 0) ? 0 : (+txt - 1);
});
});
.heart {
color: #fff;
height:50px;
cursor:pointer;
width:50px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="likes-count"> 0 </span>
<div class="liked heart">Click</div>

Related

Why does can the button no be re-enabled after being disabled?

This code intends to append numbers in a array to the string shown in a div after showing it in another div when one clicks a button. After clicking the button once, the number is shown correctly, but the button can not be clicked twice.
var index = 1;
var chartData = [103, 144, 142, 141]
function update_num(index, l){
console.log(l[index - 1])
document.getElementById('box1').innerHTML = l[index - 1] + ' MU';
setTimeout(function(){
document.getElementById('box1').innerHTML = ' ';
}, 1000);
setTimeout(function(){
document.getElementById('canvas').innerHTML = document.getElementById('canvas').innerHTML + ' ' + l[index - 1];
}, 1000);
}
function func_num() {
var index = 1;
/*Define what should happen after the button is clicked*/
document.getElementById("b").onclick = function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index <= 2 ){
update_num(index, chartData);
if(index == 1){
buttonB.innerHTML = 'Next Draw';
buttonB.style.left ='405px';
}
index++;
setTimeout(function(){
buttonB.disabled = false;
console.log('aaa ' + buttonB.disabled);
}, 1000);
} else if (index == 3){
while (index < chartData.length){
setTimeout(function(){update_num(index, chartData);}, 2000 * (index - manualClicks));
index ++;
}
setTimeout(function(){buttonB.disabled = false;}, 1000);
buttonB.innerHTML = 'To Task';
}else{
buttonB.style.visibility="hidden";
}
console.log('run6661' + buttonB.disabled);
if(index == 3 ){
setTimeout(function(){buttonB.innerHTML = 'Automatically Draw for {{ machine_cl }} times';}, forceToLookTime);
}
};
}
func_num();
<div id='canvas' style='position:relative;width:1305px;height:420px; margin: auto; margin-top: 20px;'>
<div>
<button id='b' type='button' style='visibility: visible; position: relative; left: 440px; top: 350px;'>Start</button>
<div id='box1' style='visibility: visible; position: relative; top: 300px; left: 40px; text-align: center;' >
</div>
From SPEC:
2.4.2. Boolean attributes
A number of attributes are boolean attributes. The presence of a
boolean attribute on an element represents the true value, and the
absence of the attribute represents the false value.
Also:
The values "true" and "false" are not allowed on boolean attributes.
To represent a false value, the attribute has to be omitted
altogether.
That said, you MUST remove explicitly the attribute, like this:
document.getElementById('my_button').removeAttribute("disabled");
Your Javascript code is totally fine, the problem is in the markup. You're opening the <div> tag, but not closing it properly, like </div>.
Change
<div id='canvas' style='position:relative;width:1305px;height:420px; margin:auto; margin-top: 20px;'>
<div>
to
<div id='canvas' style='position:relative;width:1305px;height:420px; margin:auto; margin-top: 20px;'>
</div>

Detecting number input spinner click

I've got a simple number input with a min="1" and max="12" value set, this is used as an hour selector. I'd like it to cycle through the hours, so when you get to 12 and press the "up" arrow, it goes back to 1 and vice-versa as well.
Right now I have this mostly working:
var inputTimer = null;
function cycle(element) {
if (element.attributes.max && element.attributes.min) {
var prevVal = element.value;
inputTimer = setTimeout(function() {
if (prevVal === element.attributes.max.value) {
element.value = element.attributes.min.value;
} else if (prevVal === element.attributes.min.value) {
element.value = element.attributes.max.value;
}
}, 50);
}
}
$("input[type='number']")
.on("mousedown", function(e) {
//this event happens before the `input` event!
cycle(this);
}).on('keydown', function(e) {
//up & down arrow keys
//this event happens before the `input` event!
if (e.keyCode === 38 || e.keyCode === 40) {
cycle(this);
}
}).on('input', function(e) {
//this event happens whenever the value changes
clearTimeout(inputTimer);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" min="1" max="12" value="12" />
Working DEMO
The issue I have is that I can't find a way to detect if the arrow spinners in the input have been clicked, or just the input as a whole has been clicked. Right now it has an issue where it changes the value when you click anywhere in the field when the value is currently at 1 or 12
Is there a way to detect if the click event occurs on the spinners/arrows within the text field?
You have to handle the input event, like this:
$('[type=number]').on('input',function(){
this.value %= 12 ;
if( this.value < 1 )
this.value -= -12 ;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=number>
I searched a lot and it seems there is no way to natively detect that. That makes this one a very important question because I think this should be added to new versions of HTML.
There are many possible workarouds. They all fail on the problem the it's impossible to know, in which direction is value going. I decided to use mouse position information to detect, whether is user increasing or decreasing a value. It works, but does not properly handle the situation, when user holds the button.
var inputTimer = null;
function cycle(event) {
var value = this.value;
// Value deep within bonds -> no action
if(value>this.min && value<this.max) {
return;
}
// Check coordinate of the mouse
var x,y;
//This is the current screen rectangle of input
var rect = this.getBoundingClientRect();
var width = rect.right - rect.left;
var height = rect.bottom-rect.top;
//Recalculate mouse offsets to relative offsets
x = event.clientX - rect.left;
y = event.clientY - rect.top;
// Now let's say that we expect the click only in the last 80%
// of the input
if(x/width<0.8) {
console.log("Not click on arrows.", x, width);
return;
}
// Check "clicked button" by checking how high on input was clicked
var percentHeight = y/height;
// Top arrow was clicked
if(percentHeight<0.5 && value==this.max) {
this.value = this.min;
event.preventDefault();
return false;
}
// Bottom arrow was clicked
if(percentHeight>0.5 && value==this.min) {
this.value = this.max;
event.preventDefault();
return false;
}
}
var input = document.getElementById("number");
input.addEventListener("mousedown", cycle);
<input id="number" type="number" min="1" max="12" value="12" />
A method you could try is by using the Attributes of the element to track what the previous value is. This isn't, of course, actually tracking which button got hit but it's the closest I've been able to get.
JS:
$(document).ready(function() {
function Init(){
var test = document.getElementById('test');
test.setAttribute('prev', 0);
}
Init()
$('#test').on('input', function() {
var test = document.getElementById('test')
var d = test.value - test.getAttribute('prev');
console.log(d);
test.setAttribute('prev', test.value);
});
});
HTML:
<input type="number" id="test">
Then all you would have is logic that says if d(irection) is positive, they clicked up. If negative, they clicked down. If it's 0 then they didn't click a button.
Working Fiddle
I think this is what you really want.
<input type="time" value="01:00" step="600"/>
There is currently no native way to capture the arrow input events separate from the input box events. Everything using number input seems to be kinda hacky for this purpose.
Next best option is something like http://jdewit.github.io/bootstrap-timepicker/
This doesn't work for your specific situation where you have a maximum and want it to wrap, but it might be helpful for others who want to process the field value based on changes via arrows, such as for setting .toFixed(2) to a currency value like I needed:
document.getElementById('el').setAttribute('data-last',document.getElementById('el').value);
document.getElementById('el').addEventListener('keyup', function(){
this.setAttribute('data-last',this.value);
});
document.getElementById('el').addEventListener('click', function(){
if(this.value>this.getAttribute('data-last')) console.log('up clicked');
if(this.value<this.getAttribute('data-last')) console.log('down clicked');
});
This is my code written in JQuery , this one can implement auto-increment ( + & - ) long-press spin buttons .
$.fn.spinInput = function (options) {
var settings = $.extend({
maximum: 1000,
minimum: 0,
value: 1,
onChange: null
}, options);
return this.each(function (index, item) {
var min = $(item).find('>*:first-child').first();
var max = $(item).find('>*:last-child').first();
var v_span = $(item).find('>*:nth-child(2)').find('span');
var v_input = $(item).find('>*:nth-child(2)').find('input');
var value = settings.value;
$(v_input).val(value);
$(v_span).text(value);
async function increment() {
value = Number.parseInt($(v_input).val());
if ((value - 1) > settings.maximum) return;
value++;
$(v_input).val(value);
$(v_span).text(value);
if (settings.onChange) settings.onChange(value);
}
async function desincrement() {
value = Number.parseInt($(v_input).val());
if ((value - 1) < settings.minimum) return;
value--
$(v_input).val(value);
$(v_span).text(value);
if (settings.onChange) settings.onChange(value);
}
var pressTimer;
function actionHandler(btn, fct, time = 100, ...args) {
function longHandler() {
pressTimer = window.setTimeout(function () {
fct(...args);
clearTimeout(pressTimer);
longHandler()
}, time);
}
$(btn).mouseup(function () {
clearTimeout(pressTimer);
}).mousedown(function () {
longHandler();
});
$(btn).click(function () {
fct(...args);
});
}
actionHandler(min, desincrement, 100);
actionHandler(max, increment, 100)
})
}
$('body').ready(function () {
$('.spin-input').spinInput({ value: 1, minimum: 1 });
});
:root {
--primary-dark-color: #F3283C;
--primary-light-color: #FF6978;
--success-dark-color: #32A071;
--sucess-light-color: #06E775;
--alert-light-color: #a42a23;
--alert-dark-color: #7a1f1a;
--secondary-dark-color: #666666;
--secondary-light-color: #A6A6A6;
--gold-dark-color: #FFA500;
--gold-light-color: #FFBD00;
--default-dark-color: #1E2C31;
--default-light-color: #E5E5E5;
}
.fx-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.fx-colum {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.fx-colum.nowrap,
.fx-row.nowrap {
flex-wrap: nowrap;
}
.fx-row.fx-fill>*,
.fx-colum.fx-fill>* {
flex-grow: 1;
}
.spin-input {
border: 1px solid var(--secondary-light-color);
}
.spin-input>div:first-child {
cursor: pointer;
border-right: 1px solid var(--secondary-light-color);
}
.spin-input>div:first-child:active {
transform: translate3d(1px, 0px, 1px)
}
.spin-input>div:last-child {
flex: none;
border-left: 1px solid var(--secondary-light-color);
cursor: pointer;
}
.spin-input>div:last-child:active {
transform: translate3d(1px, 0px, 1px)
}
.icon {
font-weight: bold;
text-align: center;
vertical-align: middle;
padding: 12px;
font-size: 28px;
}
.icon.primary,
.icon.primary .ci {
color: var(--primary-dark-color);
}
.icon.reactive:hover .ci {
color: var(--primary-light-color);
}
.hidden {
display: none;
}
<script src="https://releases.jquery.com/git/jquery-3.x-git.min.js"></script>
<div class="spin-input nowrap fx-row fx-fill" >
<div class="icon reactive">
<span class="ci ci-minus">-</span>
</div>
<div class="icon">
<span>0</span>
<input type="text" class="hidden" value="0">
</div>
<div class="icon reactive">
<span class="ci ci-plus">+</span>
</div>
</div>
There is my jQuery plugin , I hope that can help you .
So I am not sure there is anyway to determine what is being clicked, be it field input or little arrows, but I was able to get it working like this.
Fiddle: http://jsfiddle.net/nusjua9s/4/
JS:
(function($) {
var methods = {
cycle: function() {
if (this.attributes.max && this.attributes.min) {
var val = this.value;
var min = parseInt(this.attributes.min.value, 10);
var max = parseInt(this.attributes.max.value, 10);
if (val === this.attributes.max.value) {
this.value = min + 1;
} else if (val === this.attributes.min.value) {
this.value = max - 1;
} else if (!(val > min && val < max)) {
// Handle values being typed in that are out of range
this.value = $(this).attr('data-default');
}
}
}
};
$.fn.circularRange = function() {
return this.each(function() {
if (this.attributes.max && this.attributes.min) {
var $this = $(this);
var defaultVal = this.value;
var min = parseInt(this.attributes.min.value, 10);
var max = parseInt(this.attributes.max.value, 10);
$this.attr('min', min - 1);
$this.attr('max', max + 1);
$this.attr('data-default', defaultVal);
$this.on("change", methods.cycle);
}
});
};
})(jQuery);
$("input[type='number']").circularRange();
HTML:
<input type="number" min="1" max="12" value="12" />
So I am not sure why I keep thinking about this and it still doesn't solve what you are seeing with the flash of out of range numbers which I don't see. But now its not confusing to setup the html ranges at least. You can set the range you want without thinking and just initialize the type="number" fields.
Try with $('input[type="number"]').change(function() {}); ? No result ?

Selecting next div with Button and changing the value

I have a 4 div elements each with their own value, for example 0. I have a button with a plus and minus that changes the value in each box. I also have a set next button so you can do the same thing to the next box.
The problem I'm facing is how to select the next div and change the value with the same plus and minus buttons and then selecting the next div and doing the same until you're at the end. It then has to return to the first div. Here is my code:
<div class="code_div">
<div class="code_area">
<p id="number1">00</p>
</div>
<div class="code_area2">
<p id="number2">00</p>
</div>
<div class="code_area3">
<p id="number3">00</p>
</div>
<div class="code_area4">
<p id="number4">00</p>
</div>
var value = 0;
var plus = false;
var minus = false;
$(document).ready(function() {
$('#set_next').click(function() {
});
$('#minus').click(function() {
minus = false;
plus = true;
if (plus == true) {
value -= 5;
}
displayValue()
});
$('#plus').click(function() {
minus = true;
plus = false;
if (minus == true) {
value += 5;
}
displayValue()
});
});
function displayValue() {
document.getElementById("number1").innerHTML = value;
}
Can anyone help me?
Keep it simple. You have a list of divs, so use a list instead. Even if you want to keep your original markup, this should give an idea on how to implement this.
var $items = $('ul li'),
qtItems = $items.length,
activeItem = 0;
$('#setnext').click(function () {
$items.removeClass('active').eq(++activeItem % qtItems).addClass('active');
});
$('#plus, #minus').click(function () {
var currvalue = $items.eq(activeItem % qtItems).text();
this.id === 'plus' ? currvalue++ : currvalue--;
$items.eq(activeItem % qtItems).text(currvalue);
});
ul {
list-style: none;
}
ul li {
display: inline-block;
margin: 0 1em;
padding: 1em;
background-color: green;
opacity: .5;
}
li.active {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active">0</li>
<li>0</li>
<li>0</li>
<li>0</li>
</ul>
<button id="setnext">set next</button>
<button id="plus">plus</button>
<button id="minus">minus</button>
But, if you cannot simplify your markup, here is another simple solution using your original html.
As you can see, you don't need all of those classes and ids.
var value = 0;
var plus = false;
var minus = false;
var index=1;
$( document ).ready(function() {
$('#set_next').click(function() {
index++;
//update
$("#number"+index).css("color","blue");
if(index==5){
index=1;
}
});
$('#minus').click(function() {
minus = false;
plus = true;
if (plus == true){
value -= 5;
}
displayValue()
});
$('#plus').click(function() {
minus = true;
plus = false;
if (minus == true){
value += 5;
}
displayValue()
});
});
function displayValue(){
document.getElementById("number"+index).innerHTML = value;
}
Although your code needs a lot of polishing (i can give you a cleaner approach if you want)
https://jsfiddle.net/cbw4zc55/
something along these lines?
html code:
<div class="code_div">
<div class="code_area">
<p id="number1">00</p>
</div>
<div class="code_area2">
<p id="number2">00</p>
</div>
<div class="code_area3">
<p id="number3">00</p>
</div>
<div class="code_area4">
<p id="number4">00</p>
</div>
<button id="set_next">set next</button>
<button id="minus">minus</button>
<button id="plus">plus</button>
javascript:
var current = 1;
var max = 4;
var value = 0;
var plus = false;
var minus = false;
$( document ).ready(function() {
$('#set_next').click(function() {
if( current < max )
{
current+=1;
}
else
{
current = 1;
}
value = parseInt($("#number"+current).text());
});
$('#minus').click(function() {
minus = false;
plus = true;
if (plus == true){
value -= 5;
}
displayValue()
});
$('#plus').click(function() {
minus = true;
plus = false;
if (minus == true){
value += 5;
}
displayValue()
});
});
function displayValue(){
document.getElementById("number"+current).innerHTML = value;
}
EDIT:
Note that you would need to recalculate the current element value each time you change your focus to a new one (aside from that the selected answer is just perfect as well)

How to create different mousedown callbacks dynamically?

I am trying to create multiple divs each with a mousedown callback.
But that callback function should not be common for all the divs , it should function differently depending upon the div clicked.
Here is the code I am using the generate the divs and setting the callbacks.
//some number
var num=4;
for(var z = 0 ; z < num ;z++)
{
//create a div with id 'z'
$("<div/>",{id:z}).appendTo("#empty");
//displaying the id on the screen
$("#"+z).text(z);
console.log("button "+z+" created");
//Callback function , which is not working as I want it to. See the bottom section for more details
$("#"+z).mousedown(function(){
console.log("Button "+z+" clicked !");
});
}
The above code runs as follows...
On clicking anyone of the divs the message "Button 4 clicked!" is generated in the console.
What should be done in order to achieve what I was aiming for ?
It would be better to use a class for the buttons and create a callback for the item.
var num=4;
for(var z = 0 ; z < num ;z++)
{
//create a div with id 'z'
$("<div/>",{id:z,class:'btn'}).appendTo("#empty");
//displaying the id on the screen
$("#"+z).text(z);
console.log("button "+z+" created");
}
$(".btn").mousedown(function(){
var z = $(this).attr('id');
console.log("Button "+z+" clicked !");
});
Keep track of your button, try modifying your code as:
var num = 4;
var btn;
for (var z = 0; z < num; z++) {
btn = $("<div>", {
id: z,
text: z
}).appendTo("#empty");
btn.on('click', function() {
alert("Button " + $(this).text() + " clicked !");
});
}
#empty div {
padding: 5px;
border: 1px solid grey;
margin-bottom: 2px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='empty'></div>
Using single click handler:
$(function() {
var num = 4;
var btn;
var empty = $("#empty");
empty.on('click', 'div.btn', function() {
alert("Button " + $(this).text() + " clicked !");
});
for (var z = 0; z < num; z++) {
btn = $("<div>", {
'id': z,
'text': z,
'class': 'btn'
});
empty.append(btn);
}
});
div.btn {
padding: 5px;
border: 1px solid grey;
margin-bottom: 2px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='empty'></div>
Give your elements a class. Then use the index of the clicked element within that class to know which one was click and act on that:
//some number
var num=4;
for(var z = 0 ; z < num ;z++)
{
$('#divHolder').append('<div class="mydivs"></div>');
}
$('body').on('mousedown', '.mydivs', function() {
// get the index of the clicked div
var curDiv = $('.mydivs').index(this);
// call a function and pass it this index
doStuff(curDiv);
});
function doStuff(clickedDiv){
// the index that was passed in will tell you what
// div was clicked do something with that
$('#show').html( 'you clickded div:' + clickedDiv);
};
.mydivs{
background-color:#cccccc;
margin-top:15px;
height:100px;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<div id="divHolder"></div>
One way to resolve this problem is to handle the event outside of the for loop.
Working Code Snippet:
//some number
var num=4;
for(var z = 0 ; z < num ;z++)
{
//create a div with id 'z'
$("<div/>",{id:z}).appendTo("#empty");
//displaying the id on the screen
$("#"+z).text(z);
console.log("button "+z+" created");
}
//Callback function taken out of the for loop and added event delegation since it is a dynamically added element
$(document).on('click', 'div div', function(){
console.log("Button "+ $(this).attr('id') +" clicked !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="empty"></div>

.click inside stop: function (event, ui) run X times (where X is the number of items) instead of just once

The code below is (hopefully) a minimized testcase of my original problem. I'm trying to set up a system where you drag list items from the left menu (draggable items) and then drop'em to the box on the right hand side. Once they're dropped, you should be able to click the "draggable item" text and expand their fieldsets.
The problem is, however, that once you have dropped the items and clicked to expand them (say you have 3 items), the first one will give you 3 alert boxes, the second one will give you 2 and the last one will only give you 1. In other words, from the top, it will give you x alert boxes (where X is the number of items).
Looking at the code, I really can't figure out why this happens, other than it seems that having the .click stuff inside stop: seems to be related, given the fact that the example on http://api.jquery.com/click/ works fine.
(BTW: The stuff inside the alert box is supposed to be the ID of the item you clicked.)
Any ideas?
<!doctype>
<html>
<head>
<title>testcase</title>
<style type="text/css">
body { padding: 50px; font-family: Arial; font-size: .9em }
#column, #data { float: left }
#column { width: 13% }
ul, ol { padding: 0; border: 0 }
li { list-style: none }
.droptarget { padding: 10px; border: 1px solid #999; height: 10px; width: 350px; margin-right: 1.2% }
.ui-draggable-dragging, .ui-sortable-helper { background: #f90; width: 100px; display: block }
</style>
<script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
function hideAllElements() {
var elements = $('.dtContent');
var elementsLength = elements.length
for (var j = 0; j < elementsLength; j++) {
elements[j].style.display = 'none';
}
}
var randNum = 0;
function randNoDups() {
tmpRand = randNum;
while (tmpRand == randNum) {
tmpRand = Math.round(Math.random() * 50000000);
}
randNum = tmpRand;
return tmpRand;
}
$(function () {
var i = 0;
$(".draggable").draggable({
connectToSortable: ".sortable",
helper: 'clone'
});
$(".contentGroupList").sortable({
connectWith: '.contentGroupList',
stop: function (event, ui) {
var currentId = ui.item.children(0).attr('id');
var currentNumber = currentId.split("dt");
var randomKey = randNoDups();
ui.item.children(0).attr({
id: ui.item.children(0).attr('id') + randomKey
});
if ((i + 1) == $('.droptarget').children().size()) {
hideAllElements();
var $formContainer = $('<fieldset>').addClass('dtContent').attr({
id: 'fs' + currentNumber[1] + randomKey
});
var $table = $('<table>').appendTo($formContainer);
var $submit = $('<input>').attr({type: 'submit'}).appendTo($formContainer);
ui.item.append($formContainer);
ui.item.attr({id: 'listItem' + i});
$("span").click(function () { alert($(this).attr('id')); });
i++;
}
}
});
});
</script>
</head>
<body>
<div id="column">
<ul id="draggables">
<li class="draggable"><span class="dt" id="dt0">Draggable item</span></li>
</ul>
</div>
<div id="contentGroups-1" class="contentGroup">
<ul class="droptarget sortable contentGroupList"></ul>
</div>
</body>
</html>
The problem is probably here:
$("span").click(function () { alert($(this).attr('id')); });
This will find every span in the document and alert it's id. Try using the ui object instead:
ui.item.click(function() {
alert(this.id);
});

Categories

Resources