AJAX: Как заменить содержимое DIV ссылкой в ​​том же DIV?

Question

У меня есть 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>

one.php

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

two.php

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

ajax.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 (рабочая область). Когда я нажимаю ссылку «Один», вызывается содержимое файла one.php, и ссылка «Два» появляется в DIV «рабочего пространства» успешно.

Но теперь, когда я нажимаю ссылку «Два», «Hello World» не появляется в DIV «рабочей области» и открывается отдельно без вызова AJAX.

Как заставить этот код заменить содержимое рабочей области DIV на «Hello World», используя ссылку «TWO» с вышеуказанным потоком?

Спасибо

Answer 1

Попробуйте метод live() вместо click:

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

live используется, когда контент, которому вы назначили события, присутствует или добавляется/ загружен позже.

Answer 2

Проблема в том, что метод init, который делает ссылки ".ajax" такими волшебными, вызывается только один раз, когда документ загружается.Когда вы заменяете 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();        
});

Или просто используйте live (как указано ниже).