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のタイプについては、最初の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()。

于 2012-10-05T15:16:05.953 に答える
1

これは、phpが画面に読み込まれる前にイベントハンドラーを割り当てているためです。jqueryloadステートメント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 に答える