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

How to bind a future event when using jQuery Mobile external page linking?

本文关键字：链接 绑定 事件 未来 外部 Mobile jQuery      更新时间：2023-09-26

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

问题是：如何将事件绑定到将来（即要加载）的内容上？

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

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

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

仅使用静态 HTML，以下代码将起作用

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

现在它不起作用，因为 DOM 是动态加载的，我尝试使用委派但也不能工作

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

知道吗？

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

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

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

如何使用var 

var myFunc = function() { ... }
$(document).ready(function() {
     $('#foo').on('input', myFunc );
});
相关文章：