Jquery livequery應用

我覺得livequery是Jquery的外掛中，最值得使用的一個外掛，
有了livequery，我們可以在DOM元件尚未生成之前就先將其綁定，
這樣就可以操作"未來的DOM元件"，
對於常常使用Ajax動態載入頁面的朋友，
無疑是一項很重要的工具。

在底下這個範例中可以清楚的知道livequery的優點：

http://www.cssrain.cn/article.asp?id=964

不過如果是要操作未來的未來的DOM元件，
千萬不要livequery兩層，
這樣會導致相同的DOM元件操作兩次，
並且會發生不可預期的問題。

錯誤示範:

$('#first_data').livequery(function(){
    $('#first_link').click(function(){
        var $new_data = $(['click me',''].join(''));
        $(first_data).append($new_data);
    });

    $('#second_data').livequery('click',funcont(){
        alert($('#first_data').find('#first_subdata').html());
        
    });
});

由上面的這個範例中，我們可以清楚的知道，#first_data是一塊尚未出現的DOM元件。
為了要將其綁定，我們使用了livequery將整個DOM元件預先保留起來，
其中還包括一個#first_link，它的作用是新增一個id為second_data連結。
這裡的second_data連結就是我所謂的"未來的未來的DOM元件"。

現在如果我們想要按下#second_data時，跑起一個警告視窗，內容為#first_data中的#first_subdata的資料，
很自然的，會在和程式的下方多加一個livequery去執行這個動作。
但是這樣的寫法，會導致#second_data連結，被啟動兩次，所以會造成不可預期之動作。

那要怎麼處理未來的未來的DOM元件呢??
其實不用把它想的太難，我只要用livequery綁定一次就OK了。
只是如果livequery之中的function如果有需要用到其他未來的DOM元件，
就必須另外寫一個livequery來處理其他的DOM元件。

所以正確的寫法如下

var first_subdata;
//Part 1
$('#first_data').livequery(function(){
    first_subdata = $(this).find('#first_subdata');
    $('#first_link').click(function(){
        var $new_data = $(['click me',''].join(''));
        $(first_data).append($new_data);
    });
});
//Part 2
$('#second_data').livequery('click',funcont(){
    alert(first_subdata.html());
});

因此，我們必須在Part 1之前，就事先宣告一個first_subdata變數去保留了#first_subdata的資料，然後在Part 2的時候才能使用first_subdata的資料。