gpt4 book ai didi

jquery-mobile - jQuery Mobile 中未触发 jQuery 单击事件

转载 作者:行者123 更新时间:2023-12-03 22:29:17 28 4
gpt4 key购买 nike

使用 jQuery jquery-1.9.1.js 和 jQueryMobile 1.3.1 (Chrome 26/Windows 7),我不明白为什么绑定(bind)到 #one1 的这些“点击”事件之一会触发,而另一个不会触发:

HTML:

<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 中运行它时,这两个事件在未包装在“mobileinit”事件中时都会触发: http://jsfiddle.net/9NRwa/

我在这里缺少什么?

最佳答案

简介

首先, mobileinit 事件不应该用于事件绑定(bind)。虽然它可以像这样使用 mobileinit 不是为此目的而创建的。它是为 jQuery Mobile 参数自动初始化而创建的,因此不应将其用于事件绑定(bind)。

正确的方法是使用正确的页面事件,例如 pageinit 。有关页面事件的更多信息,请查看我的其他答案,其中涵盖了各种 jQuery Mobile 页面事件及其与通常的 jQuery 文档就绪范例的区别: jQuery Mobile: document ready vs page events

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

jQuery 事件绑定(bind)的多种方式

第一个示例

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

第一个示例是新的,首先使用现已弃用的方法 live 。基本上,它是一种事件委托(delegate)机制,允许您将事件处理程序不仅绑定(bind)到给定节点类型的所有现有实例,还绑定(bind)到给定节点类型的任何 future 实例(“类型”是指一组由以下项匹配的 DOM 节点)给定的 jQuery 选择器)。我想说的是,在事件绑定(bind)期间,该元素不需要存在于 DOM 中,基本上,此方法的工作原理是将事件处理程序绑定(bind)到文档本身,然后对通过 DOM 冒泡的所有事件使用react。因此,在事件绑定(bind)期间元素 #one1 是否存在并不重要。您可以稍后动态创建它,它仍然可以工作。

第二个示例

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

这是事件绑定(bind)的旧方式。它要求事件存在于 DOM 中才能绑定(bind)事件。在你的例子中,你试图将此点击事件绑定(bind)到当时 DOM 中不存在的元素。绑定(bind)过程后加载并不重要。

工作示例

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

看一下这个例子。您将在 jQuery Mobile 中看到 5 种不同的单击事件绑定(bind)方式:

  • 在页面初始化到 DOM 之前,将 2 个点击事件绑定(bind)在 HEAD 中
  • 2 个点击事件绑定(bind)在 pagebeforeshow 事件的 HEAD 中,基本上这也是绑定(bind)的委托(delegate),因为事件是在页面即将显示并且已经在 DOM 内时绑定(bind)的
  • 1点击事件绑定(bind)在所有页面内容之后的BODY中。因为此时所有内容都已加载到 DOM 中,所以此单击事件将起作用。

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>

结论

  • 不要使用 mobileinit 事件进行事件绑定(bind),它会在页面加载到 DOM 之前触发,并且只有通过委托(delegate)绑定(bind)的事件才有效。
  • 将您的事件绑定(bind)到正确的 jQuery Mobile 页面 events

有关此主题的有用链接:

  1. jQuery Live() Method And Event Bubbling

    同时 live 方法已弃用 on应该使用方法来代替。在某些基准测试中,该方法的速度快了 2 倍。

  2. jQuery Mobile: document ready vs page events

  3. Various jQuery Mobile page events
  4. What does “event bubbling” mean?

关于jquery-mobile - jQuery Mobile 中未触发 jQuery 单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16375975/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com