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

Question

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/javascript" 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.

score 1 · Answer 1 · answered Apr 06 '12 at 14:12

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
});

Felix Kling · Accepted Answer · 2011-08-09T21:20:28.567

1

$(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

edited Aug 09 '11 at 21:20

answered Aug 09 '11 at 21:03

Felix Kling

795,719
175
1,089
1,143

My original respone was in err -- $(this) does in fact work with `live` in IE6 and IE7. – Nick Aug 09 '11 at 21:15
The problem was apparently the string concatenation: `$(this + ':selected')` -- IE freaks, apparently other browsers drop the concatenation and just attempt $(this), which works. – Nick Aug 09 '11 at 21:23
@hztetra: It should not work in any browser, but you are right, it works in Chrome. Strange.... I hope you know now that least that it is wrong to concatenate `this` with a string. It does not matter that it works in other browsers, it is not correct. – Felix Kling Aug 09 '11 at 21:25
@hztetra: No, it does not ignore the concatenation. You can try `alert($(this + ':selected').selector)` to see the result selector. I don't know why it works. – Felix Kling Aug 09 '11 at 21:30
I sure do, and am in the process of seeing if I attempted that any where else :) Thanks for the help. – Nick Aug 09 '11 at 21:30

score 1 · Answer 3 · answered Aug 09 '11 at 21:03

1

Use:

$('.setgroup').live('change',function(){
    updateSelected($(this).val(), json);
});

answered Aug 09 '11 at 21:03

Darm

5,581
2
20
18

It does in fact work -- it was an err on my part (saving one file and looking at another ;) ). Thanks :) – Nick Aug 09 '11 at 21:20

score 1 · Answer 4 · answered Aug 09 '11 at 21:05

1

Try this

$('.setgroup').live('change',function(){
    updateSelected($(this).val(), json);
});

answered Aug 09 '11 at 21:05

ShankarSangoli

69,612
13
93
124

score 1 · Answer 5 · answered Aug 09 '11 at 21:08

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()

score 1 · Answer 6 · answered Aug 09 '11 at 21:08

1

This seems to work:

$('.setgroup').live('change',function(){

        updateSelected($(this).find(':selected').val(), json);

    });

http://jsfiddle.net/q2wkd/3/

answered Aug 09 '11 at 21:08

bbogovich

341
1
7

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

6 Answers6