Question

我整个上午都试图解决这个问题，如果可以，请帮助我。

我有这段代码：

$(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;
        }
    });
});

我的问题是我从未收到“点击！”提醒。点击带有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 -->

Answer 1

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

锚标记应该是：

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

并且事件处理程序脚本应该是：

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

我希望这会有所帮助。

Answer 2

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

也取决于你的html的样子，你可能在错误的元素上使用'on'。它需要是您要将代码绑定到click事件的元素的父元素。所以它就像

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

（如果菜单触发器是父级，请忽略第二部分）

jQuery Mobile点击事件没有解雇？

2 个答案: