jQuery（Mobile）- 给一个div绑定tap事件

Question

如果我有这个HTML代码：

<div id="myDiv"></div>

并且这段 CSS：

#myDiv{
    background:url('../images/someImage.png') no-repeat;
    background-size:100%;
    width:44px;
    height:44px;

}

当用户点击myDiv时，我需要打开一个新页面。我有一个外部的js文件，在文件中我写下了以下代码:

function bindMyDiv(){
    $("#myDiv").bind('tap',function(event, ui){
        alert("binding");
    })
}

但我不知道在HTML中从哪里调用它，或者这是否是正确的方法。有建议吗？

- soleil

Answer 1

尝试

$("#myDiv").live("tap", function(event){
  alert('binding');
});

您可以将此代码放置在您的onReady JavaScript 文件中。

编辑：

http://jsfiddle.net/R9e6u/

- Bot

---

你不需要将它放在 document.ready 事件处理程序中，因为它是事件委托，所以直接绑定到始终可用的 document 元素。此外，.delegate() 优于 .live()，而且自 jQuery 1.7 起，.live() 已被弃用。 - Jasper

您是正确的，但目前jQuery仅支持1.6.4版本，该版本使用live而不是on。 - Bot

这是来自.delegate()文档的内容：从jQuery 1.7开始，.delegate()已被.on()方法取代。然而，在早期版本中，它仍然是使用事件委托的最有效手段。因此，如果您正在使用jQuery 1.4.2或更新版本，则jQuery团队建议使用.delegate()。 - Jasper

Answer 2

这里的每个人都提供了不同的解决方案，让您处理脚本，但我认为没有人停下来想他们是否应该帮助改进您的脚本。 "或者这是否是正确的方法"，答案是否定的。也许我过于简单化了，但是使用JQM时，如果您想要一个div（或任何DOM元素）打开一个新页面，只需在其周围（或其中，适当的情况下）包装一个锚标记，并将href设置为 href =“＃myNewPage”，并将要加载的JQM页面上的id设置为 id =“myNewPage”。

jQuery Mobile的框架已经设置好自动将JS和AJAX注入普通HTML元素以提供平滑的UX。虽然有时需要绑定触摸事件，但这种情况不需要那种级别的代码...这就是jQuery Mobile的美妙之处=）。

绑定触摸事件的示例：显示/隐藏dom对象，触发插件的单击等。

- Scott Sword

---

他不想链接到新的jqm页面，他想将其绑定到一个函数。 - netalex

Answer 3

你想在所在页面的 pageinit 事件上调用该函数。你可以使用 jQuery Mobile 的其他页面事件，如：pagecreate、pageshow 等，但我认为 pageinit 是最好的选择。

实现应该类似于这样：

$(document).delegate('#page-id', 'pageinit', function () {
    $("#myDiv").bind('tap',function(event, ui){
        alert("binding");
    })
});

或者

$(document).delegate('#page-id', 'pageinit', bindMyDiv);

您需要使用data-role="page"元素的ID替换#page-id，该元素是包含您的div的。

与事件委派相比，此方法更适用于#myDiv元素，因为直接绑定到元素会在触发事件时创建较少的开销。如果使用事件委托，则事件必须冒泡到委托根。

- Jasper