jquery mobile - 页面加载时的事件绑定问题

Question

我正在为我的网站使用 jquery mobile。如果页面是第一次加载它工作正常。如果页面是通过 ajax（带有转换）加载的，它将不起作用。我尝试了 pageinit 事件，但没有成功。

这是包含在所有页面中的页脚脚本。

  <a href="javascript:void(0);" id="expand-footer" class="expand-button" data-role="none"></a>
    <div class="footer-content"> Footer </div>

    $(document).ready(function() {
       $('#expand-footer').unbind("click").click(function(e) {
        e.preventDefault();
        console.log("click");
        $('#expand-footer').toggleClass('expand-button-close', 'expand-button');

        if ($('#expand-footer').hasClass('expand-button expand-button-close')) {
            console.log("if click");
            $('.footer-content').hide("slide", { direction: "down" }, 1000);
        } else {
            console.log("else click");
            $('.footer-content').show("slide", { direction: "down" }, 1000);
        }

    });
   }); 

这可能是什么问题？

Answer 1

我认为你不应该听unbind。当然，我会收听click 事件：

$('#expand-footer').click(function (e) {
    e.preventDefault();
    console.log("click");
    $('#expand-footer').toggleClass('expand-button-close', 'expand-button');

    if ($('#expand-footer').hasClass('expand-button expand-button-close')) {
        console.log("if click");
        $('.footer-content').hide("slide", { direction: "down" }, 1000);
    } else {
        console.log("else click");
        $('.footer-content').show("slide", { direction: "down" }, 1000);
    }
});

如果移动网站将在设备上使用，那么您需要添加一个事件侦听器，用于设备何时准备好document.addEventListener("deviceready", onDeviceReady, false);，如果您需要一直使用此代码，则在设备已准备就绪。

function onDeviceReady(){
    $('#expand-footer').click(function (e) {
        e.preventDefault();
        console.log("click");
        $('#expand-footer').toggleClass('expand-button-close', 'expand-button');

        if ($('#expand-footer').hasClass('expand-button expand-button-close')) {
            console.log("if click");
            $('.footer-content').hide("slide", { direction: "down" }, 1000);
        } else {
            console.log("else click");
            $('.footer-content').show("slide", { direction: "down" }, 1000);
        }
    });  
}

但是，如果您只需要在用户导航到某个页面时执行代码，那么您可以使用以下任何一种方法：

• 页面显示
• 页面创建
• 页面初始化

更多文档可以在这里找到：http://jquerymobile.com/test/docs/api/events.html

你的语法如下：

$(document).on('pageinit', '#your_page_id', function(){
    $('#expand-footer').click(function (e) {
        e.preventDefault();
        console.log("click");
        $('#expand-footer').toggleClass('expand-button-close', 'expand-button');

        if ($('#expand-footer').hasClass('expand-button expand-button-close')) {
            console.log("if click");
            $('.footer-content').hide("slide", { direction: "down" }, 1000);
        } else {
            console.log("else click");
            $('.footer-content').show("slide", { direction: "down" }, 1000);
        }
    });   
});

使用其他事件：

$(document).on('pagecreate', '#your_page_id', function(){
    //your code here
});

$(document).on('pageshow', '#your_page_id', function(){
    //your code here
});

.live 也可以使用，但很快就会被弃用：

$('#your_page_id').live("pagecreate", function(){
     //your code here
});

使用 JavaScript 动态附加 id：

$(document).append('<div data-role="page" id="your_page_id"><div data-role="content">dummy text</div></div>'); $('#my_page_id').page();

或者在你的 PHP 文件中：

<?php
    echo "<div data-role=\"page\" id=\"your_page_id ";
    //use single quote ' to avoid escaping double quote in string
    echo " \"></div>";
?>

避免使用特定 ID：或者，您可以将 jQuery 应用到任何页面：

$(document).on('pagecreate','[data-role=page]', function(){
    //code here
});


$(document).on('pageinit','[data-role=page]', function(){
    //code here
});


$(document).on('pageshow','[data-role=page]', function(){
    //code here
});