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类型，HTML标记必须在您运行初始jQuery时已存在于页面中。实际上，它们不存在，因此没有事件处理程序附加到它们。

您可以选择纠正错误：

您可以将动态形式的事件处理程序与.on()
您可以在将对象添加到页面后安装事件处理程序。

使用.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()的动态风格如何运作的一般说明，请参阅this post。

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

当我的html标签来自我的php脚本时，为什么我的javascript函数不起作用

3 个答案: