JQuery .on() change event not firing(page is inside a .load())

Question

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.

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, Apr 30 '12 at 16:21
could you please show how the JS is embedded inside the inner page? — Alnitak, Apr 30 '12 at 16:24
possible duplicate of [Can scripts be inserted with innerHTML?](http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml) — Quentin, Apr 30 '12 at 16:28
innerpage.js is included in a script tag in the innerpage.aspx — Dave, Apr 30 '12 at 16:38

score 2 · Accepted Answer · answered Apr 30 '12 at 16:39

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.

I added the myinnerpage.js code into the home.html page and this fixed the problem. I would prefer a way where I didn't have to do that but this works for now. Thanks — Dave, Apr 30 '12 at 16:41

Kyle Macey · Answer 2 · 2012-04-30T16:33:20.007

1

Try firing the event manually?

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

edited Apr 30 '12 at 16:33

answered Apr 30 '12 at 16:22

Kyle Macey

8,074
2
38
78

3

The event may be "bound" to `document`, but it's "delegated" to the input. This won't work. It should be `$('input[name=rbfileByNameOrID]:radio').trigger('change');` Also, I think he wants the `change` event to be bound to the element, so it triggers when it's supposed to. – gen_Eric Apr 30 '12 at 16:30

score 1 · Answer 3 · answered Apr 30 '12 at 16:31

1

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

OR:

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

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

answered Apr 30 '12 at 16:31

thecodeparadox

86,271
21
138
164

3

I think he wants the `change` event to trigger when it's supposed to. I think the issue here is the event isn't getting bound. – gen_Eric Apr 30 '12 at 16:34

score 0 · Answer 4 · answered Apr 30 '12 at 18:07

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.

JQuery .on() change event not firing(page is inside a .load())

4 Answers4