jquery - jquery前置问题

Question

我不知道为什么这不起作用..

这有效：

$(this).prepend("<div data-role='header'><h1>Hi</h1></div>");

但是，当我这样做时，我的整个页面变为空白（没有加载），但没有错误：

$(this).prepend("<div data-role='header'><a href='link'>Link</a><h1>Hi</h1></div>");

这也不起作用：

$(this).prepend("<div data-role='header'><h1>Hi</h1></div>");
$(this).find('div[data-role=header]').prepend("<a href='link'>Link</a>");

这也不是：

var string = "<div data-role='header'><a href='link'>Link</a><h1>Hi</h1></div>";
$(this).prepend(string);

这是重要的情况下的上下文：

$('div[data-role*="page"]').each(function (i) {
    if ($(this).children('div[data-role*="header"]').length != 0) {
        alert("has header");
    } else {
        if (i == 0) {
            var string = "<div data-role='header'><a href='link'>Link</a><h1>Hi</h1></div>";
            $(this).prepend(string);

        } else {
            $(this).prepend("<div data-role='header'><h1>Hi</h1></div>");
        }
        $(this).find('div[data-role=header]').page();
    }
});

我怎样才能让它工作？

Answer 1

假设您使用的是 1.4 或更高版本，请尝试使用引入的新元素创建语法动态创建所需的元素：

$('<a />', {
    'href': 'http://www.google.com',
    'target': '_blank',
    'text': 'This is a link',
    'class': 'myClassName',
    'css': {
        'top': '20px'
    }
           }).appendTo('<div />', { 'data-role': 'header' })
             .prependTo($(this));

Answer 2

以我的经验，如果在 -tag 中使用 prepend 函数的脚本，它将无法工作，因为脚本是在 DOM 准备好之前加载的。

为了避免这种挫败感，将 javascript 放在标记之前是一个好习惯。

Answer 3

我猜你正在使用 jQuery mobile 它似乎在jsfiddle上按预期工作。你在什么浏览器上测试这个？

将 jsfiddle更新为更完整的示例，以便页面转换从第一页开始。