问题：

jQuery click事件未在jQueryMobile中触发

司马同

2023-03-14

使用jQuery-1.9.1。js和jQueryMobile 1.3.1（Chrome 26/Windows 7）我不明白为什么这些“点击”事件绑定到#一个触发，而另一个没有：

超文本标记语言：

<div data-role="page" id="one" data-theme="a">
    <div data-role="header" data-position="inline">
        <h1>One</h1>
    </div>
    <div data-role="content" data-theme="a">
        <a href="#" id="one1">[one]</a>
        <a href="#two">two</a>
        <a href="#three">three</a>
    </div>
</div>

JavaScript：

<script>
$(document).on( "mobileinit", function() {
    $(document).on('click', '#one1', function(e){
        console.log('firing');
    });
    $('#one1').on("click", function() {
        console.log('not firing');
    });
}); 
</script>

当我在JSFiddle中运行它时，两个事件都会在没有包装在“mobile einit”事件中时触发：http://jsfiddle.net/9NRwa/

我错过了什么？

共有2个答案

令狐宏浚

2023-03-14

正如文件所述：

由于mobileinit事件会立即触发，因此在加载jQuery Mobile之前，需要绑定事件处理程序

当前，jQuery Mobile加载后，您的mobileinit事件正在运行，因为jsFiddle将在加载完侧栏中选择的库后执行javascript代码。要使其工作，您的结构应如下所示：

<script src="jQuery library include first"></script>
<script>
    $(document).on("mobileinit", function() {
        // Your code here
    });
</script>
<script src="jQuery Mobile include last"></script>

西门品

2023-03-14

首先，Mobeinit事件不应用于事件绑定。虽然它可以像那样使用，但Mobeinit不是为此目的而创建的。它是为jQuery Mobile参数自动初始化而创建的，因此不应用于事件绑定。

正确的方法是使用适当的页面事件，例如pageinit。有关页面事件的更多信息，请查看我的另一个答案，其中涵盖了各种jQuery Mobile页面事件以及它们与通常的jQuery文档就绪范式的区别：jQuery Mobile：文档就绪与页面事件。

我不回答这个问题。像点击这样的事件可以通过几种不同的方式绑定。让我们看一下您使用的示例：

$(document).on('click', '#one1', function(e){
    console.log('firing');
});

第一个示例是首次使用现在已弃用的live方法的新示例。基本上，它是一种事件委派机制，允许您不仅将事件处理程序绑定到给定节点类型的所有现有实例，还绑定到给定节点类型的任何未来实例（所谓“类型”，我指的是由给定jQuery选择器匹配的一组DOM节点）。这里我想说的是，在事件绑定期间，该元素不需要存在于DOM中，基本上这个方法通过将事件处理程序绑定到文档本身，然后对DOM中出现的所有事件做出反应来工作。因此，在事件绑定期间，元素#one1是否存在并不重要。您可以稍后动态创建它，它仍然可以工作。

$('#one1').on("click", function() {
    console.log('not firing');
});

这是旧的事件绑定方式。它要求DOM中存在事件，然后才能绑定事件。在您的例子中，您试图将此click事件绑定到DOM中当时不存在的元素。它是在绑定过程之后加载的，这无关紧要。

jsFiddle示例：http://jsfiddle.net/Gajotres/QmNsa/

看看这个例子。在jQuery Mobile中，您将看到5种不同的点击事件绑定方式：

在页面初始化到DOM之前，在头部绑定2个click事件

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
        <script>
                $(document).on('click', '#one1', function(e){
                    // This example will work because it was bind with event delegation process
                    console.log('Firing 1');
                });
                $('#one1').on("click", function() {
                    // This example will not work because event do not exist in this moment
                    console.log('Not firing');
                });
                $(document).on( "pagebeforeshow", function() {
                    // This example will work because it was bind with event delegation process            
                    $(document).on('click', '#one1', function(e){
                        console.log('Firing 2');
                    });
                    // This example will work because element exist in a DOM during the pagebeforeshow event
                    $('#one1').on("click", function() {
                        console.log('Firing 3');
                    });
                });             
        </script>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <a href="#" id="one1" data-role="button">[one]</a>
            </div>
        </div>    
        <script>
            $('#one1').on("click", function() {
                // This example will  work because we are binding it when element is already loaded into the DOM
                console.log('Firing 4');
            });            
        </script>
    </body>
</html>

不要使用mobile einit事件进行事件绑定，它会在页面加载到DOM之前触发，只有与委托绑定的事件才能工作。
将您的事件绑定到正确的jQuery Mobile页面事件中。

jQuery Live（）方法和事件冒泡

虽然不推荐使用live方法，但应改用方法。在一些基准测试中，这种方法的速度是原来的2倍。

jQuery Mobile：文档就绪vs页面事件

jQuery click事件未在jQueryMobile中触发

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档