Load divX from page2 into page 1 using jsonp to bypass same origin policy

Question

I'm trying to load a div from another page using this,

$('#result').load('page2.php #divX')

but the JavaScript contained in that page won't work even though page1 and page two are using the same JavaScript file linked at the head of both pages. So i assume this is the same origin policy. How do i do this using jquery and json to bypass this restriction?

Something like this Ajax but i don't know where to go from here.

(function($) {
    var url = 'page2';
    $.ajax({
       type: 'GET',
        url: url,
        async: false,
        contentType: "application/json",
        dataType: 'jsonp'
    });
})(jQuery);

I understand i have to write some callback at page2 if I'm not wrong, how do I do that?

Additions.

Here's Page1.

$('#Loadfrompage2').click(function() {
$('#result').load('../page2.php #divX')
});

Page.2 Content.

<div id="divX">
            <input name="B" type="submit" value=" ">
            <input name="P" type="submit" id="Q" value=" ">
             <input name="A" type="submit" value=" ">

Answer 1

There are 2 approaches to managing code for newly inserted html such as when using load(). Either you have to run any event binding code ( or plugins) on the new elements after they are inserted , or you have to use event delgation that binds to elements further up the DOM tree that are permament assets in the page

Delegation approach ( accounts for future or replaced elements):

Instead of $('.myButtonclass').click.... use:

$(document).on('click', '.myButtonclass', function(){

    /* same code you already have in current click handler*/

})

After insertion approach:

$('#content').load('path/to/server', function(){
   /* new html exist now*/
   $(this).find('.buttonClass').click....
})

FYI- jsonp is used for retrieving JSON data cross domain... is very different than html. Subject of this thread got confusing due to reference to jsonp