当我的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();
                });
            }
        });