代码之家 › 专栏 › 技术社区 › Naveed

AJAX:如何用同一DIV中的链接替换DIV的内容?

hyperlink html json ajax php

Naveed · 技术社区 · 14 年前

我的index.php如下:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>

<a href='one.php' class='ajax'>One</a>

<div id="workspace">workspace</div>

一个.php

<?php
$arr = array ( "workspace" => "<a href='two.php' class='ajax'>two</a>" );
echo json_encode($arr);
?>

两个.php

<?php 
$arr = array( 'workspace' => "Hello World" );
echo json_encode($arr);
?>

阿贾克斯.js

jQuery(document).ready(function(){
    jQuery('.ajax').click(function(event) {
        event.preventDefault();
        // load the href attribute of the link that was clicked
        jQuery.getJSON(this.href, function(snippets) {
            for(var id in snippets) {
                // updated to deal with any type of HTML
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
});

加载index.php时,有一个链接(One)和一个DIV(workspace)。当我点击'One'链接时,One.php的内容被调用,链接'Two'成功地出现在'workspace'DIV中。

但是现在当我点击链接'Two'时,'Hello World'就不会出现在'workspace'DIV中,并且在没有AJAX调用的情况下单独打开。

谢谢

2 回复 | 直到 14 年前

Sarfraz 14 年前

live() 方法而不是 click :

jQuery('.ajax').live('click', function(event) {
  // your code
});

这个 live 当分配给事件的内容存在或稍后添加/加载时使用。

Phil Cohen 14 年前

问题是,使“.ajax”链接如此神奇的init方法只在文档加载时被调用一次。当你替换html时,魔力就消失了。

试试这个:

function assignLinks() {

    jQuery('.ajax').click(function(event) {
            event.preventDefault();
            // load the href attribute of the link that was clicked
            jQuery.getJSON(this.href, function(snippets) {
                for(var id in snippets) {

                    // updated to deal with any type of HTML
                    jQuery('#' + id).html(snippets[id]).click( function() {
                        assignLinks();
                    });
                }
            });
        });

}

jQuery(document).ready(function() {
    assignLinks();        
});

推荐文章

James Williams · 如何在单击按钮时刷新div内容

2 年前

Atif Rizwan · 调用节点。使用AJAX的独立HTML文件的js API

2 年前

Mehmet · javascript执行了多个

2 年前

Shijil · 尝试在Jquery PHP搜索代码中添加选择标记功能

2 年前

Parker · 如何使表格行的单元格项加粗n秒?

2 年前

Chris J. · ajax获取查找数据属性值的请求

2 年前

GauravSolo · 在columndef datatable jquery中使用响应数据

2 年前

Hassaan Iqbal · 点击按钮打开网站,无需重新加载整个页面(AJAX)

2 年前

estudiante · 如何调用在tensorflow中运行的模型,该模型由ajax中的docker提供服务?

2 年前

Pedro F · Ajax调用后脚本运行不正常

2 年前