jQuery元素的容器层次结构访问

Container hierarchy access for jQuery elements

本文关键字：层次结构 访问 元素 jQuery      更新时间：2023-09-26

物理页面上的JQM元素:

#page_test1
    button changing page to #page_test2
#page_test2
    div #place to put something programmatically

将按钮放入#place容器中，我写了以下代码:

$(document).on('pagebeforeshow', '#page_test2', function(event) {
    $('#place').empty();
    $('#place').append('<a href="#" data-role="button" data-theme="d">Dynamic button inserted by JavaScript</a>');
    $('#place').trigger('create');
});

好的，但是当我尝试将.on主体移动到脚本级别(直接在脚本标签下)时，由于上下文松散，内部代码变得错误:

$(document).on('pagebeforeshow', '#page_test2', function(event) {
    addButton(); // Attempt to move widget manipulation up
});
// Widget manipulation not changed but moved outside (level up) .on
// Not working
function addButton() {
    $('#place').empty();
    $('#place').append('<a href="#" data-role="button" data-theme="d">Dynamic button inserted by JavaScript</a>');
    $('#place').trigger('create');
}

如何从JQM层次结构的不同级别和外部访问JQM元素?

我猜这是非常基本的JQM/Ajax，所以我将非常感谢采取URL与共同的信息。

若要通过目标页面外的代码动态访问，请使用以下命令:

$(document).on(event, '.selector', function() { });

要通过目标页内的代码动态访问，请使用以下命令:

$('.selector').on(event, function() { });

相关文章：