使用 jQuery Mobile 外部页面链接时如何绑定未来事件？答案

【问题标题】：How to bind a future event when using jQuery Mobile external page linking?使用 jQuery Mobile 外部页面链接时如何绑定未来事件？
【发布时间】：2015-01-27 18:30:22
【问题描述】：

在 jQuery Mobile 中，外部页面通过 Ajax 链接（即外部页面的内容通过 Ajax 加载到当前页面）。

问题是：如何在未来（即被加载）的内容上绑定一个事件？

假设要加载的内容具有以下 HTML 输入

<input type='text' id='foo' name='foo'>

如何在其上绑定输入事件？

只使用静态 HTML，下面的代码就可以工作

$('#foo').on('input', function () {
...

由于 DOM 是动态加载的，所以现在它不起作用，我尝试使用委托但也不起作用

$(document).on('#foo', 'input', function () {
...

有什么想法吗？

【问题讨论】：

它不起作用，因为该代码应该是$(document).on('input', '#foo', function() {});，而不是相反。

标签： javascript jquery jquery-mobile jquery-events jquery-on

【解决方案1】：

只要脚本标签在 data-role="page" div 内，您就可以在外部页面中包含脚本（只有第一个找到的 data-role="page" 元素的内容会加载到当前页面。

$(document).on("pagecreate", "#extpagedivid", function(){
    $(document).on("input", "#foo", function(){...});
});

只要您使用事件委托，您也可以在主页的 pagecreate 处理程序中包含此代码。确保输入的 ID 在将加载到主页面的所有页面中都是唯一的。

【讨论】：

【解决方案2】：

用var怎么样

var myFunc = function() { ... }

$(document).ready(function() {
     $('#foo').on('input', myFunc );
});

【讨论】：