Problem: Using jquery's ".live" within an ".each" loop

the_sleeper
the_sleeper used Ask the Experts™
on
Greetings,

I've set up a little test to learn how to use jquery's .live options.

3 hard-coded radio buttons
1 dynamic radio button
-----------------------------
Test the click event

After several attempts at using live...all failed. Using .bind() works, but not on the dynamic field ((see code below)) .  How should this script be adapted to use the jquery .live() method?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	$('input[name="rdo_test"]').each(
	
		function(index){
			$(this).bind(
				"click",function()
				{				
					alert("index: " + index + " value = " + $(this).val())	
				}
			) // end bind
		} // end function
	) // end each
	
	
	// dynamic field test
	$('<input type="radio" name="rdo_test" value="4" />Test 4<br />').appendTo('body');
	
});
</script>

</head>

<body>
<input type="radio" name="rdo_test" value="1" />Test 1<br />
<input type="radio" name="rdo_test" value="2" />Test 2<br />
<input type="radio" name="rdo_test" value="3" />Test 3<br />

</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
Because : $(this).live( apply only to the current radio button and not to a largest set of objects
Expert of the Year 2008
Top Expert 2008
Commented:
apply live() to the set - $('input[name="rdo_test"]'):
<script type="text/javascript">

$(document).ready(function() {

	$('input[name="rdo_test"]').live("click",function(index){
		alert("index: " + index + " value = " + $(this).val())	
	});
	// dynamic field test
	$('<input type="radio" name="rdo_test" value="4" />Test 4<br />').appendTo('body');
	
});
</script>

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
If you want the index you may use : http://api.jquery.com/index/


	$('input[name="rdo_test"]').live("click",function(){				
		alert("index: " + $(this).index('input[name="rdo_test"]') + " value = " + $(this).val())	
	})

Open in new window


Your page updated :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	$('input[name="rdo_test"]').live("click",function(){				
		alert("index: " + $(this).index('input[name="rdo_test"]') + " value = " + $(this).val())	
	})
	
	// dynamic field test
	$('<input type="radio" name="rdo_test" value="4" />Test 4<br />').appendTo('body');
	
});
</script>

</head>

<body>
<input type="radio" name="rdo_test" value="1" />Test 1<br />
<input type="radio" name="rdo_test" value="2" />Test 2<br />
<input type="radio" name="rdo_test" value="3" />Test 3<br />

</body>
</html>

Open in new window

Author

Commented:
that'll do it!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial