在 IE6-7 中将 $(this) 与 live/delegate 结合使用？
Posted
技术标签:
【中文标题】在 IE6-7 中将 $(this) 与 live/delegate 结合使用？【英文标题】：Using $(this) in combination with live/delegate in IE6-7? 【发布时间】：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 中放置了一个警报，它会正确触发。
【问题讨论】：
【参考方案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
);
【讨论】：
以上是关于在 IE6-7 中将 $(this) 与 live/delegate 结合使用？的主要内容，如果未能解决你的问题，请参考以下文章
在一个露天项目中将 live-search-docs 配置文件放在哪里？