Question

为什么我在同一页面中使用此功能两次很难点击index.php中的链接

<script>
$(document).ready(function(){
    $('#stage').load('index.php');
});
</script>

Answer 1

通常.load()用于更动态的目的，比如从index.php中绘制特定元素，如下所示：

$(document).ready(function(){
    $( '#stage' ).load( 'index.php #content' ); // Fetch the content div in index.php
});

当抓取整个页面时，我会发现通过.get()函数获取它并使用这样填充它更合适：

$(document).ready(function(){
    $.get( "index.php", function( data ) {
        $( "#stage" ).html( data );
    });
});

Answer 2

使用click事件的事件委派语法：

$(document).ready(function(){
    $('#stage').load('index.php');

    $('#stage').on('click', 'a', function(e){
       e.preventDefault();
       alert('clicked');
    });
});

当您使用.load()方法填充div#stage时，事件的直接绑定将在此处起作用。因此，在这种情况下，您需要将事件委托给最近的静态父级，在这种情况下是#stage div本身。事件委托具有特定语法：

$(staticparent).on(event, selector, callback);

在此语法中，您可以使用$(staticparent)更改此$(document) or $(document.body)，因为这是页面中所有元素的父级，因此$(document)始终可用于将事件委派给它。

Answer 3

您还可以使用iframe显示来自不同文件的内容：

<script>
$(document).ready(function(){
 $("#frame").attr("src", "index.php");
});
</script>

jquery函数从不同的文件加载数据

3 个答案: