jQuery attribute selector not working inside $.ajax call (IE6, IE7)_问答_开发者

jQuery attribute selector not working inside $.ajax call (IE6, IE7)

开发者 https://www.devze.com 2023-03-24 22:44 出处：网络

I\'m trying to select some links in my content after an AJAX call, but it doesn\'t seem to be working in IE6 and IE7 (haven\'t tested 8 or 9). The links are supposed to be overridden when clicked, and

I'm trying to select some links in my content after an AJAX call, but it doesn't seem to be working in IE6 and IE7 (haven't tested 8 or 9). The links are supposed to be overridden when clicked, and an alert is supposed to triggered instead. However, IE still tries to go to the address. It works fine in Chrome and Firefox.

Here's the main HTML document

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

and here's "content.html", the snippet that's being retrieved by the AJAX call

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

An interesting thing to note is that IE still overrides the first link (the one that isn't being retrieved by the AJAX call). It's just the link inside the content retrieved by the AJAX call that isn't being overridden.

Any suggestions are appreciated. Thanks!开发者_如何学Python

Please try this which is using live to bind the events

$(function(){

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

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

});

Try this code

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

more details here Error in jquery attribute selector and IE6-7

Try using .live() instead of .click() or even better use .delegate().

The link you're trying to bind has been introduced later and may not be available before the .click() binding.

Here's a JSfiddle for this but now it looks like maybe it was a selector issue... JSFiddle