IE 7 can't bind event (using .live()) to dynamically created element using .load()
I'm having trouble getting IE7 to keep a click event bound to an element that is added to the DOM using .load(). Here's some code:
$('.mybtn').live('click', function(e){
e.preventDefault();
$('#mypage').load('load-this-page.htm');
});
And here's the html
<div id="mypage">
<a href="#" class="mybtn">clickme</a>
// stuff goes here
</di开发者_C百科v>
On page load the click works but once the div is loaded via the clickme link the click stops working in IE7. The clickme link is within the div on load and also within the load() loaded html file that's why I'm using live().
This code works in FF 3.6, fyi.
Anyone have any idea what's up (besides the fact the IE sucks balls)? Thanks!
EDIT: here's what loads into the div
<ul>
<li>
<a href="02-01-2010" id="prev-month" class="mybtn"></a>
</li>
<li>
<h3>March 2010</h3>
</li>
<li>
<a href="04-01-2010" id="next-month" class="mybtn"></a>
</li>
</ul>
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
Try this:
$('#mypage').load('load-this-page.htm #DivOrWrapper');
From the API documentation, the page you're loading ("load-this-page.htm") cannot be a full HTML document, i.e. it can't have <html>, <title> or <head> elements, otherwise cross-browser compatibility isn't guaranteed.
Maybe this is due to IE browser restrictions. Here's a quote from the jQuery Docs:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
This means that you can't do $load:
- From https://mydomain.com to http://mydomain.com
- From http://mydomain.com to http://www.mydomain.com
- From http://mydomain.com to http://mydomain.se
Try this one:
var fn = function(e) {
e.preventDefault();
$('#mypage')
.load('load-this-page.htm')
.find('.mybtn')
.click(fn);
};
$('.mybtn').live('click', fn);
加载中,请稍侯......
精彩评论