當我的html標記來自我的php腳本時，為什么我的javascript函數不起作用

Question

我想知道為什么如果我的html標記來自php腳本，我的javascript函數將無法工作嗎？

這是我的jQuery代碼：

$(function () {

//functions don't work

    $('ul li:gt(4)').hide();

    $('.prev').click(function() {
        var first = $('ul').children('li:visible:first');
        first.prevAll(':lt(5)').show();
        first.prev().nextAll().hide()
    });

    $('.next').click(function() {
        var last = $('ul').children('li:visible:last');
        last.nextAll(':lt(5)').show();
        last.next().prevAll().hide();
    });

//end of functions don't work

    $('.load').click(function() {
        $.ajax({
            url: 'load.php',
            success:function(data){
                $('#paging-container').html(data);
            }
        });
    });

});

這是我的html代碼：

<input class="load" type="button" value="Load">
<div id="paging-container">

</div>

這是我的php腳本：

 <?php  
    echo '<ul>';
    for($i=1;$i<=50;$i++){
        echo '<li>'.$i.'</li>';
    }
echo '</ul>
<a class="prev">prev</a> | <a class="next">next</a>';
?>

Answer 1

對於您使用的jQuery類型，在運行初始jQuery時，頁面中必須已經存在HTML標記。 實際上，它們不存在，因此沒有事件處理程序附加到它們。

您有兩種選擇可以更正此問題：

1. 您可以通過.on()使用動態形式的事件處理程序
2. 您可以在將對象添加到頁面之后安裝事件處理程序。

使用.on()的動態形式如下所示：

$("#paging-container").on('click', '.prev', function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide()
});

$("#paging-container").on('click', '.next', function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
});

這里的事件處理程序實際上是附加到#paging-container ，它使用委托的事件處理來捕獲發生在子對象上的事件。 即使在安裝了事件處理程序之后添加/刪除了子對象，只要#paging-container本身未銷毀，這也將起作用。

有關.on()的動態.on()如何工作的一般說明，請參見這篇文章 。

Answer 2

隱藏元素並綁定.prev和.next代碼在文檔加載時運行，而不在ajax加載時運行。 將代碼粘貼到成功函數中的行之后：

$('.load').click(function() {
    $('#paging-container').html(data);
    $('ul li:gt(4)').hide();
    $('.prev').click(function() { ...

這樣，它們將綁定到DOM中現在存在的對象上。

Answer 3

這是因為您要在將php加載到屏幕之前分配事件處理程序。 嘗試執行在jquery load語句ala成功事件中不起作用的功能：

$.ajax({
            url: 'load.php',
            success:function(data){
                $('#paging-container').html(data);
                $('ul li:gt(4)').hide();

                $('.prev').click(function() {
                var first = $('ul').children('li:visible:first');
                first.prevAll(':lt(5)').show();
                first.prev().nextAll().hide()
                });

                $('.next').click(function() {
               var last = $('ul').children('li:visible:last');
                last.nextAll(':lt(5)').show();
                last.next().prevAll().hide();
                });
            }
        });