在 IE6-7 中将 $(this) 与 live/delegate 结合使用？答案

【问题标题】：Using $(this) in combination with live/delegate in IE6-7?在 IE6-7 中将 $(this) 与 live/delegate 结合使用？
【发布时间】：2011-10-23 14:15:00
【问题描述】：

我似乎无法从在 IE6/IE7 中查看时动态创建的选择选项中获取值。 IE 总是返回 undefined 作为值。

我有一个设置a fiddle，下面是一个示例的完整源代码（如果您尝试在 IE6/7 中使用 fiddle ...呵呵）：

<!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>

示例使用 live()，但是我也尝试了使用 .delegate() 的变体。这两种方法都适用于除 IE6/7 之外的所有浏览器。我也尝试过使用 click 作为事件。有什么想法吗？

我还尝试了here 提供的解决方案。问题似乎在于 $(this) 没有被正确解释，好像我在 live/change/delegate 中放置了一个警报，它会正确触发。

【问题讨论】：

标签： jquery internet-explorer jquery-selectors

【解决方案1】：

$(this + ':selected') 将不起作用。它将尝试将 DOM 元素的字符串表示形式（可能是 [object HTMLSelectElement]）与 :selected 连接起来，从而产生“选择器”$('[object HTMLSelectElement]:selected')。

我想你只是想要$(this)。 select 无论如何都不能是 selected。

一般来说，如果您已经有一组选定的元素，您可以使用.filter() ^[docs] 过滤某些元素。如果要查找特定后代，请使用.find() ^[docs]。

但是，您也可以在插入元素后附加事件处理程序：

// or $('#sg-1').change(...
$('.setgroup').change(function(){
    updateSelected($(this).val(), json);
});

DEMO

【讨论】：

我最初的反应是错误的——$(this) 实际上在 IE6 和 IE7 中可以与 live 一起使用。
问题显然是字符串连接：$(this + ':selected') -- IE 怪胎，显然其他浏览器放弃了连接，只是尝试 $(this)，它有效。
@hztetra：它不应该在任何浏览器中工作，但你是对的，它在 Chrome 中工作。奇怪....我希望您现在至少知道将this 与字符串连接是错误的。没关系，在其他浏览器上也行，不正确。
@hztetra：不，它不会忽略串联。您可以尝试alert($(this + ':selected').selector) 来查看结果选择器。我不知道它为什么起作用。
我确实这样做了，并且正在查看我是否在其他任何地方尝试过 :) 感谢您的帮助。

【解决方案2】：

用途：

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

【讨论】：

它确实有效——这是我的错误（保存一个文件并查看另一个文件；））。谢谢:)

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

您的选择器中有错误。您正在尝试将元素引用与字符串连接起来。这不会给你一个有效的选择器。要更正它，您需要：

$(":selected", this)

或：

$(this).find(":selected")

但是，比这些选项中的任何一个更好的是直接在选择上使用.val()：

$(this).val()

【讨论】：

【解决方案5】：

这似乎有效：

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

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

    });

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

【讨论】：

【解决方案6】：

对于未来的访客：

.live() 现已弃用。如需跨浏览器支持，请在使用 jQuery 1.7+ 时使用 .on() 或在较低版本中使用 .delegate()。

.on() 示例：

jQuery(document).on('change', '.setgroup', function(){
      updateSelected($(this).val(), json); // your javascript code goes here
});

.delegate() 示例：

$(document).delegate('.setgroup', 'change', function() {
    updateSelected($(this).val(), json); // your javascript code goes here
});

【讨论】：