[JavaScript] Delete Buttons Not Working

[XicoXperto]

Hi everybody!
I'm new in the forum and new in JavaScript!
Ok, the problem is the following:
i need to have a dinamic form where i can add contacts, documents and other stuff, i've figured that out, but i add a delete button (in this case its a div) and when i click it gives an alert telling what ID it has, the problem is that only the first of the button shows the alert.

$(function() {
$('div.icon').click(function() {
  alert( $(this).attr('id') );
});
});

for example contacts:

<span class="contact">
<input type="text" />
<select> <!-- options --> </select>
<div class="icon" id="delete">
  <img src="delete.png" />
</div>
</span>

and this last code is added when clicked on add button xD (with the correct attributes, like name, values, classes, etc).
The ID of the icon is the same to figure out what type of icon it is, I've tested with diferent ID's but the result is the same.
Does anyone have any idea?

You can test at http://ba.dotslashsource.com

Any help is welcomed!
Thanks !

[Kor]

Shall we guess which library you have used? Is it JQuery? Is it Prototype? Or?
Whenever you post a problem which is not related with native JavaScript, please, make clear the library used.

[XicoXperto]

Sorry, im using jQuery.

[Padonak]

every id attribute must be unique but you have four id="delete"

[XicoXperto]

every id attribute must be unique but you have four id="delete"

Hi mate, thanks for the reply, but i've tested even with diferent id's, and just tested it again, and still only the first one is clickable.
I've tried the .on() function and it didnt work either.

Could it be cause of the buttons been added after the script been made?

[Padonak]

in Opera all the 4 buttons are clickable and every button alerts "delete". your page has much of js code and it is hard to find bugs. if you put here a simplified version and describe the problem much clearly i hope it is going to be resolved sooner.

[XicoXperto]

Could it be cause of the buttons been added after the script been made?

I've tested and found that when i add elements on cliente side i need to execute the call again, so i've added:

$('div.icon').off("click");
$('div.icon').click(function(){alert( $(this).attr('id') );});

these 2 lines to code, first one to clean what the "buttons" already had onclick event and then added the event to the buttons

Thanks for the help!

[XicoXperto]

in Opera all the 4 buttons are clickable and every button alerts "delete". your page has much of js code and it is hard to find bugs. if you put here a simplified version and describe the problem much clearly i hope it is going to be resolved sooner.

Oh didnt test on Opera.
But it was that what i've wanted to.
The problem was that when i added the new elements i didnt add the click event to the new elements.

<script language="javascript" >
// add elements
$(function() {  
	$('input[type="button"].plus').click( function () {
		
		// get vars
		var type = $(this).attr("id");
		var actualPerson = $('input[type="hidden"]#activePerson').val();
		var newId=  $('input[type="hidden"]#' + type).val();
		
		// change for the new ID number and write it at it's input
		newId++;
		$('input[type="hidden"]#' + type).val( newId );
		
		// finally get the info from PHP 
		$.post('index.php' , { action : 'new' + type , id : newId } , 
			function ( output ) {
				// post it at the right place
				$('div.blueTopOpen#' + type + 's').find( '.holder#' + type )
					.append( output.replace( /<% parent %>/g , 'pessoa' + actualPerson ) ); 
	
				// transform remaining inputs
				$("form").removeClass("jqtransformdone");
				$('form').jqTransform({ imgPath: 'images/img/' });

				// giving Icon the click event
				$('div.icon').off("click");
				$('div.icon').click(function(){alert( $(this).attr('id') );});
			});
	});
});
</script>