Question

我正在尝试将页面初始化事件从afaik，jquerymobile绑定到一个方法，以便我可以设置我的标题，这已经完成，因为稍后我希望动态设置它。但我的事件甚至没有触发：' - （任何帮助将不胜感激。

$('#mapmode').bind('pageinit', function(event) {
    initPageHeader();
});

function initPageHeader(){
    alert('oldhtml');
    var oldhtml=document.getElementById('header').innerHTML;
    document.getElementById('header').innerHTML="";
    var html = oldthml + '<a href="#" data-rel="back" data-role="button" ><img'+
    ' align="middle"src="../images/back.png" alt="back" vspace="2"/></a><h1>'+
    '<img align="middle"src="../images/main_header.png" alt="logo" vspace="2"/>'+
    '</h1><a href="#first" data-role="button" data-inline="true">'+
    '<img align="middle"src="../images/home.png" '+
    'alt="picture to take you to the first page"/></a>'
    document.getElementById('header').innerHTML=html;
}

Answer 1

如果要绑定到pageinit而不是使用事件委派，则必须在文档本身上执行此操作：

$(document).on("pageinit", function(event) {
    initPageHeader();
});

如果此行为特定于#mapmode页面，则可以采用事件委派方式：

$(document).on("pageinit", "#mapmode", function(event) {
    initPageHeader();
});

顺便说一句，正确使用jQuery可以使您的事件处理程序更短，更易读：

function initPageHeader()
{
    $("#header").html(function(index, originalMarkup) {
        return originalMarkup
            + '<a href="#" data-rel="back" data-role="button">'
            + '<img align="middle" src="../images/back.png" alt="back" '
            + 'vspace="2"/></a><h1><img align="middle" '
            + 'src="../images/main_header.png" alt="logo" vspace="2"/>'
            + '</h1><a href="#first" data-role="button" data-inline="true">'
            + '<img align="middle"src="../images/home.png" '
            + 'alt="picture to take you to the first page"/></a>';
    });
}

Answer 2

在设置之前，您需要拥有alert(oldhtml);。将其移至document.getElementById('header').innerHTML=html;

上方

正如以下jeemusu所建议的，您可以找到有关jQuery .on的更多信息，因为不推荐使用bind。

绑定（'pageinit'）无法调用方法

2 个答案: