JQuery .on() change事件未触发（页面位于.load()内部）

Question

好的，我已经寻找了几个小时的答案，但是没有找到有效的方法。

我有一个页面，在单击事件后加载到一个div中，代码如下：

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

然后，在我的innerpage.js文件中，我有以下内容：

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

除非我单独打开myinnerpage.aspx页面，否则change函数不会被触发。

- Dave

---

你在注册点击处理程序时，$('#mybutton') 是否包含你的按钮，还是在页面加载后才加载？你使用的是哪个版本的jQuery？ - StuperUser

内部页面.js已经写入客户端了吗？ - Sunny

请问您能展示一下JS是如何嵌入内部页面的吗？ - Alnitak

可能是重复的问题：innerHTML 可以插入脚本吗？ - Quentin

innerpage.js 已经在 innerpage.aspx 的 script 标签中被引用。 - Dave

Answer 1

您能否将myinnerpage.js代码放在主JavaScript中，而不是在包含的页面中？

如果您不能这样做，我没有“好的解决方案”，但这可能可以帮助您：当jQueryMobile-Navigation使用ajax加载页面时也遇到了同样的问题，并且他们使用了非jquery的解决方案。在他们的$.ajax->success中，他们使用了innerHTML:

[...]

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

[...]

你可以在此处查看完整的代码：这里。

它可以与页面div中包含的脚本标签和内联JavaScript一起使用。

- Julien

---

我将myinnerpage.js代码添加到home.html页面中，这解决了问题。虽然我更希望有一种不需要这样做的方法，但现在这个方法可行。谢谢。 - Dave

Answer 2

尝试手动触发事件？

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

- Kyle Macey

---

该事件可能会“绑定”到document，但是它会被“委派”给输入框。这不起作用。应该改为$('input[name=rbfileByNameOrID]:radio').trigger('change');。另外，我认为他希望将“change”事件绑定到元素上，以便在应该触发的时候触发。 - gen_Eric

Answer 3

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

或：

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

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

- thecodeparadox

---

我认为他希望在应该触发时触发“change”事件。我认为问题在于事件未被绑定。 - gen_Eric

Answer 4

问题在于当运行.load时，myinnerpage.aspx的内容（全部）被放置到#mydiv中。任何<script>标签都将运行，但它们将来自当前页面的路径，因此您可能需要检查文件路径。

您可能需要更改脚本以使用绝对路径而不是相对路径，因为../在当前页面和加载的页面上可能不同。

- gen_Eric