0

将 click / vclick 事件绑定到 JQueryMobile 中的按钮的正确方法是什么？

我尝试过使用$().bind("click", function(){});，$().on("click", function(){});但从未得到控制台的响应。

我在 index.html 中设置了这样的按钮：

编辑

 <div data-role="page" data-title="OneStop Mobile" class="ui-responsive-panel" id="homepage">        
    <div data-role="panel" data-dismissable="false" id="optionsPanel">
        <div>
            <ul data-role="listview">
                <li> <a href="#" id="store">store</a>         </li>     
                <li> <a href="#" id="download">Download</a>   </li>
                <li> <a href="#" id="check">Check</a>         </li>
                <li> <a href="#" id="clear">Clear</a>         </li>
            <ul>      
        </div>
    </div>
</div>

我在 index.js 中像这样绑定它：

$("#store").bind("click", function(event, ui) {
    console.log("WORK DAMNIT!")
});

根据 JQMobile api 和演示页面，这应该可以工作，但我从未在我的设备或浏览器上看到任何事情发生。

4

2 回答 2

0

您的问题是，在您绑定事件时，您将其绑定到的元素还不是DOM.

DOM您需要通过调用事件中的函数ready或 JQM 页面的pageinit来确保在绑定事件时元素已经是.on 的一部分，或者您可以通过调用 .on 的重载版本来使用事件委托功能。

例如

在事件期间绑定pageinit（这也确实使用事件委托来绑定到pageinit事件）。

//passing in the selector as the second parameter calls the overloaded version of .on
$(document).on('pageinit', '#myStorePage', function() {
   $("#store").bind("click", function(event, ui) {
      console.log("This should Work!")
   });
});

将.on与事件委托一起使用

$(document).on('click', '#store', function() {
 console.log('This should Work!');
});

请注意，事件委托的工作方式是将事件绑定到现有的更高级别元素，然后在事件冒泡时检查选择器。通常，您实际上希望将事件绑定到尽可能靠近要检查的元素，但如果需要，您可以一直到文档。

作为Omar提到的旁注，使用我提供的第一种方法.bind与 .on 一样有效。然而，从 jQuery 1.7 开始， .bind 只委托给 .on ，这是首选（.bind为了向后兼容而保留）..

于 2013-08-15T15:52:45.017 回答
0 

$(document).on('click','#store', function(event) {
    alert("WORK DAMNIT!")
});
于 2013-08-15T15:58:20.857 回答