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

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

pageshow
pagecreate
pageinit

可在此处找到更多文档：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
});

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

1 个答案: