Using $(this) in combination with live/delegate in IE6-7?
I cannot seem to get the value from a select option that has been dynamically created when viewing in IE6/IE7. IE always returns undefined as the value.
I have a set up a fiddle, and below is the complete source of an example (in case you attempt to use fiddle in IE6/7 ...heh):
<!doctype html>
<head>
<script type="text/javascr开发者_如何学Cipt" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var json = "blah blah blah";
jQuery(document).ready(function(){
$('#myForm').html('<select id="sg-1" class="setgroup" name="sg-1"><option value="s-1">Something</option><option value="s-2">Another</option><option value="s-3">Third</option><option value="s-4">Fourth</option></select>');
$('.setgroup').live('change',function(){
updateSelected($(this + ':selected').val(), json);
});
});
function updateSelected(value, json){
//do some stuff with the json in my app
$('#selected').html(value + ' was selected');
}
</script>
</head>
<body>
<form id="myForm">
</form>
<p id="selected" style="font-size:20px; color:#f00;"></p>
</body>
</html>
The examples use live(), however I have also tried a variation using .delegate(). Both methods work in all browsers except IE6/7. I have tried using click as the event as well. Any ideas?
I also tried the solution(s) provided here. The problem seems to be in $(this) not being interpreted correctly, as if I place an alert inside of the live/change/delegate it will fire properly.
$(this + ':selected') will not work. It will try to concatenate the string representation of a DOM element, which will probably be [object HTMLSelectElement], with :selected, resulting in the "selector" $('[object HTMLSelectElement]:selected').
I think you just want $(this). A select cannot be selected anyway.
In general, if you already have a set of selected elements, you can filter for certain elements with .filter() [docs]. If you want to find specific descendants, then use .find() [docs].
However, you can also attach the event handler after you inserted the element:
// or $('#sg-1').change(...
$('.setgroup').change(function(){
updateSelected($(this).val(), json);
});
DEMO
Use:
$('.setgroup').live('change',function(){
updateSelected($(this).val(), json);
});
Try this
$('.setgroup').live('change',function(){
updateSelected($(this).val(), json);
});
You have an error in your selector. You are trying to concatenate an element reference with a string. This will not give you a valid selector. To correct it you want either:
$(":selected", this)
or:
$(this).find(":selected")
But, better than either of these options would be to just use .val() on the select directly:
$(this).val()
This seems to work:
$('.setgroup').live('change',function(){
updateSelected($(this).find(':selected').val(), json);
});
http://jsfiddle.net/q2wkd/3/
For future visitors :
.live() is deprecated now. For cross-browser support, use .on() when you are using jQuery 1.7+ or .delegate() in lower versions.
.on() example :
jQuery(document).on('change', '.setgroup', function(){
updateSelected($(this).val(), json); // your javascript code goes here
});
.delegate() example :
$(document).delegate('.setgroup', 'change', function() {
updateSelected($(this).val(), json); // your javascript code goes here
});
加载中,请稍侯......
精彩评论