Problem: Using jquery's ".live" within an ".each" loop
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?
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>
leakim971
Because : $(this).live( apply only to the current radio button and not to a largest set of objects
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If you want the index you may use : http://api.jquery.com/index/
Your page updated :
$('input[name="rdo_test"]').live("click",function(){
alert("index: " + $(this).index('input[name="rdo_test"]') + " value = " + $(this).val())
})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>ASKER
that'll do it!