jQuery double event fire after post/get

Question

ok i've wracked my brain and others to figure out why this is happening in IE and latest version of FF. It works in chrome. i am but a novice developer and recently started using jquery. so i dont even know if i'm going about this correctly.

its a basic form for the most part. jquery ajax post() then get() to update the page. once the page is loaded from get, the right hand nav/sidebar collapsible headings double fire and so do the action links in the action pane. i've tried binding the click event with bind(), live(), and delegate(). it worked originally with bind but i had to rebind all my click events after the ajax call and i am trying to find a way around that.

i've set up a static version of the app that i'm building here:

http://ishiftdelete.com/pw_mkvi/ajax_wtf.htm

to test: click on the Edit Page link inside the actions page in the right-hand nav/sidebar. this will open a model dialog with a form and submit button.

Answer 1

Ok so a friend of mine figured this out. Apparently scripts were being loaded twice.

BAD:

$.get(gurl, function (data) {
    var $response = $('<div />').html(data);
$('#mydiv').html($response.find('#mydiv').html()); //form
});

GOOD:

$.get(gurl, function (data) {
    var $response = $(data);
$('#mydiv').html($response.find('#mydiv').html()); //form
});

Answer 2

I know you've already solved this, but for future finders, you can add a wrapper around your <div> like this:

<div id="myDivParent">
  <div id="myDiv"></div>
</div>

Then you can simplify your situation with .load() and the element you're looking for, like this:

$("#myDivParent").load(gurl + " #myDiv");

That's it, if you pass the argument as url selector it'll get only that element from the response :)