开发者

Using $(this) in combination with live/delegate in IE6-7?

开发者 https://www.devze.com 2023-03-27 01:18 出处:网络
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 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
});
0

精彩评论

暂无评论...
验证码 换一张
取 消