jQuery Mobile 点击事件没有触发？

Posted 2023-05-09

【中文标题】jQuery Mobile 点击事件没有触发？

【英文标题】：jQuery Mobile click event not firing?

【发布时间】：2012-10-10 20:24:23

【问题描述】：

我整个上午都在尝试解决这个问题，所以如果可以的话，请帮助我。

我有这个代码：

$(document).bind('pageinit', function()
    var menuOpen;
    // Menu
    $('#menu-trigger').on('click', function(e)
        e.preventDefault();
        alert('click!');
        if(menuOpen != true) 
            $('.ui-page-active').animate(
                'margin-left': '390px'
            , 300, function()
                menuOpen = true
            );
            return false;
         else 
            $('.ui-page-active').animate('margin-left': 0, 300, function()menuOpen = false);
            return false;
        
    );
);

我的问题是我从来没有收到“click!”警报。单击带有id #menu-trigger 的元素后，没有任何反应。

我已经尽我所能，但仍然没有结果。

我的代码在 script 标记内，就在 jQuery Mobile 脚本包含的下方。

P.S.：这是 html 代码片段：

<header data-role="header" class="with-logo">
  <a href="#" id="#menu-trigger" data-role="button" class="ui-btn-left"><img src="images/menu-trigger-icon.png"></a>
  <h1><img src="images/logo.png"></h1>
</header><!-- /header -->

【参考方案1】：

您必须从锚的 id 属性值中删除哈希符号。

锚标签应该是这样的：

<a href="#" id="menu-trigger" data-role="button" class="ui-btn-left">

事件处理脚本应该是这样的：

<script>
    $(document).on('click', '#menu-trigger', function(e)
        // your code
    );
</script>

我希望这会有所帮助。

【讨论】：

天哪！我是个白痴 :D 非常感谢您的关注！这是一个很好的例子，小石头可以把车翻过来：）再次感谢！

【参考方案2】：

您应该将 pageinit 绑定到具有 data-role = "page" 的 div，而不是文档。

还取决于您的 html 的外观，您可能在错误的元素上使用了“on”。它必须是要将代码绑定到单击事件的元素的父元素。 所以就像

$('#someparent').on('click', yourfunctionasdefinedabove, '#menu-trigger');

（如果 menu-trigger 是父级，请忽略第二部分）

【讨论】：

感谢您的回答！父级是指元素的直接父级还是任何父级？

我不确定我是否理解 :( 我已经用我正在使用的 html 段更新了问题。