Okay, so I've been looking for an answer for this for a couple of hours now and found nothing that works.

I have a page that I load inside a div after a .click event, so that looks like this:

$('#mybutton').click( function () { $('#mydiv').load('myinnerpage.aspx'); });

Then I have inside myinnerpage.js I have:

$(document).on('change', 'input[name=rbfileByNameOrID]:radio', function () {
if ($('input#rbByFileName').attr('checked'))
    fileSelectionBy('filename');
else
    fileSelectionBy('fileid'); 
});

the change function never gets fired, unless I open myinnerpage.aspx by itself.

Okay, so I've been looking for an answer for this for a couple of hours now and found nothing that works.

I have a page that I load inside a div after a .click event, so that looks like this:

$('#mybutton').click( function () { $('#mydiv').load('myinnerpage.aspx'); });

Then I have inside myinnerpage.js I have:

$(document).on('change', 'input[name=rbfileByNameOrID]:radio', function () {
if ($('input#rbByFileName').attr('checked'))
    fileSelectionBy('filename');
else
    fileSelectionBy('fileid'); 
});

the change function never gets fired, unless I open myinnerpage.aspx by itself.

• javascript
• jquery
• radio-button

• Does $('#mybutton') contain your button when you're registering the click handler or is it loaded to the page afterwards? Which version of jQuery are you using? – StuperUser Commented Apr 30, 2012 at 16:21
• Is the innerpage.js written to the client? – Sunny Commented Apr 30, 2012 at 16:24
• could you please show how the JS is embedded inside the inner page? – Alnitak Commented Apr 30, 2012 at 16:24
• possible duplicate of Can scripts be inserted with innerHTML? – Quentin Commented Apr 30, 2012 at 16:28
• innerpage.js is included in a script tag in the innerpage.aspx – Dave Commented Apr 30, 2012 at 16:38

4 Answers 4

Can you put your myinnerpage.js code in your main javascript, instead of in your included page ?

If you can't, i've not the "good-solution", but this can help you : jQueryMobile-Navigation had the same problem when they loaded page with ajax, and they used a non-jquery solution to solve that. In their $.ajax->success, they use innerHTML :

[...]

//workaround to allow scripts to execute when included in page divs
all.get( 0 ).innerHTML = html;

[...]

You can see their full code here.

It works with script-tag AND inline-javascript included in page divs.

$('input#rbByFileName').trigger('change');

OR:

$('input#rbByFileName').change();

$('#mybutton').click( function () { 
  $('#mydiv').load('myinnerpage.aspx', function(){
      $('input#rbByFileName').change();
  }); 
});

Try firing the event manually?

$('#mybutton').click( function () { 
  $('#mydiv').load('myinnerpage.aspx', function(){
      $('input[name=rbfileByNameOrID]:radio').trigger('change')
   }); 
});

The problem here is that when .load is ran, the contents of myinnerpage.aspx is placed (in its entirety) into #mydiv. Any <script> tags will run, but they'll be from the path of the current page, so you may need to check your file paths.

You may need to change your scripts to use absolute paths instead of relative paths, because ../ may not be the same on the current page and the loaded page.