1

我想知道如果我的 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>';
?>
4

3 回答 3

3

您的代码隐藏元素并绑定.prev并.next在文档加载时运行，而不是在 ajax 加载时运行。将该代码粘贴在成功函数的行之后：

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

这样，它们将绑定到现在位于 DOM 中的对象上。

于 2012-10-05T15:15:40.290 回答
3

对于您使用的 jQuery 类型，HTML 标记必须在您运行初始 jQuery 时已经存在于您的页面中。事实上，它们不存在，因此没有附加事件处理程序。

你有几个选择来纠正这个问题：

  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()。

于 2012-10-05T15:16:05.953 回答
1

这是因为您在 php 加载到屏幕之前分配了事件处理程序。尝试执行在 jquery 加载语句 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();
                });
            }
        });
于 2012-10-05T15:16:49.447 回答