jQuery 属性选择器在 $.ajax 调用中不起作用（IE6、IE7）答案

【问题标题】：jQuery attribute selector not working inside $.ajax call (IE6, IE7)jQuery 属性选择器在 $.ajax 调用中不起作用（IE6、IE7）
【发布时间】：2011-08-04 05:04:58
【问题描述】：

我试图在 AJAX 调用后选择我的内容中的一些链接，但它似乎在 IE6 和 IE7 中不起作用（尚未测试 8 或 9）。单击时应该覆盖链接，并且应该触发警报。但是，IE 仍然会尝试访问该地址。它在 Chrome 和 Firefox 中运行良好。

这是主要的 HTML 文档

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Cavern Sounds - Music production services</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<a href="someplace.html">someplace 1</a>
<div id="content"></div>
<script type="text/javascript">
$.ajax({
  url: "content.html",
  success: 
    function(html){
      $("#content").html(html);
      $('a[href="someplace.html"]').click(function(e){
        e.preventDefault();
        alert("hello world");});
    }
});
</script>
</body>
</html>

这里是“content.html”，即由 AJAX 调用检索的 sn-p

<a href="someplace.html">someplace 2</a>

需要注意的一个有趣的事情是 IE 仍然会覆盖第一个链接（AJAX 调用未检索到的链接）。只是 AJAX 调用检索到的内容中的链接未被覆盖。

感谢任何建议。谢谢！

【问题讨论】：

顺便说一句，你应该把你的最后一个script标签inside的身体或头部。
啊，谢谢，是的，我只是在制作示例时搞砸了。
您可以尝试使用选择器作为包含“someplace.html”的href，而不是像这样的等于：$('a[href*="someplace.html"]') 或这个（以）：$('a[href$="someplace.html"]')
@jfriend00 是的，事实证明是这样的。但是，= 选择器仍然适用于第一个链接，但 AJAX 链接需要 *= 选择器才能工作。任何人都可以提供允许使用 = 选择器进行 AJAX 查询的解决方案吗？或者解释一下为什么在这种情况下不能使用它？
我只知道如果您使用 Javascript 从链接中获取 href 值，它将返回一个完全限定的 URL，而不管源中最初是什么，所以也许这就是您不能匹配的原因带有 = 的文件名，即使那是页面中最初的文件名。也许 IE 对原始页面中的链接和后来添加的链接的工作方式不同。

标签： jquery ajax internet-explorer

【解决方案1】：

请试试这个使用live绑定事件的方法

$(function(){

$('a[href*="someplace.html"]').live('click', function(e){
        e.preventDefault();
        alert("hello world");
});

$.ajax({
  url: "content.html",
  success: 
    function(html){
      $("#content").html(html);
   }
});

});

【讨论】：

嗯，刚试过。不过似乎仍然无法在 IE6 和 7 中工作... =/
能否请您提醒 ajax 调用成功处理程序中的 html 内容，并查看其中的锚标记的 href 是什么？我认为选择器不匹配，所以事件没有触发。
有效！虽然，一旦我将选择器更改为 *= 而不是 =，我的原始代码就可以工作。奇怪的是，我从 AJAX 请求中提醒了内容，而 URL 仍然只是“someplace.html”，所以我不知道为什么 = 不起作用......我宁愿使用 = 而不是 *=因为它更具体。这可能是 jQuery 中的错误吗？
这不是错误。 "=" 查找完全匹配，而 "*=" 查找传递的属性中的 contains。我很高兴它成功了，谢谢。
是的，但是在这种情况下，我不是要寻找完全匹配的吗？

【解决方案2】：

试试这个代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Cavern Sounds - Music production services</title>
<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
$.ajax({
  url: "content.html",
  success: 
    function(html){
      $("body").html(html);
      $('a[href*="someplace.html"]').live("click",(function(e){
        e.preventDefault();
        alert("hello world");}));
alert($('a[href*="someplace.html"]').size());
    }

});
</script>

更多详情在这里Error in jquery attribute selector and IE6-7

【讨论】：

+1 我什至没有看到选择器的东西……太专注于绑定了。

【解决方案3】：

尝试使用 .live() 而不是 .click() 或者更好地使用 .delegate()。

您尝试绑定的链接已在稍后引入，在 .click() 绑定之前可能不可用。

这是一个 JSfiddle，但现在看起来可能是选择器问题... JSFiddle

【讨论】：

是的，我认为这是某种 AJAX（返回内容）选择器问题，但我仍然不明白为什么 = 适用于第一个链接而不适用于第二个链接。我认为这里有某种错误......