tags:

views:

63

answers:

2

Hi All - 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
</div>

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>
+1  A: 

Try this:

$('#mypage').load('load-this-page.htm #DivOrWrapper');
Simeon
Simeon - Thanks, but isn't your suggestion for loading only a portion of a page? The file that's getting loaded into the div has only a few ul, li and some links-including one to reload this div-Make sense?
petron
Yes, I suggested this in case you were loading a complete HTML file, then this would solve the problem. But if that's not the case, then might I also see the code for the page you are loading?
Simeon
A: 

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.

Peter
Peter-thanks for the response. No it's not a full html doc. It's a small snippet of code with nothing but some ul and li and some links. One of the links should reload this small file back into the div
petron