24

.on'クリック'関数をAJAXでロードされたコンテンツで機能させるのに問題があります。

以前にjquery.liveを使用したことがありますが、.onを使用するのはこれが初めてであり、まったく同じように機能することを理解しているため、問題が発生している理由がわかりません。

以下は、クリックする要素を提供するHTMLです。

    <h1>Press &amp; Media</h1>
    <div id="back"></div>
    <div id="overlay-content">
        <span id="edocs" class="tab"></span>
        <span id="news" class="tab"></span>
        <span id="partners" class="tab"></span>
    </div>

以下は、AJAXコンテンツをロードする関数です。

    $("#overlay-content").on('click','#news',function() {
        var active = 1;
        $("#loading").show();
        $("#overlay-content").fadeOut(1000, function() {
            $.get("http://<? echo ROOT; ?>includes/functions.php", { pressmediaNews: active }, function(data) {
                $("#loading").hide(400);
                $("#overlay-content").empty().append(data).fadeIn(1000);
            });
        });
    });

これにより、次のHTMLが読み込まれます

    <div id="news-left-panel">
        <h4>News Section</h4>
        <ul>
            <li id="newsID2" class="newsYear">
                <p>2012</p>
                <ul class="newsMonths" style="display:none">
                    <li>Jan
                        <ul class="newsArticles" style="display:none">
                            <li onClick="newsID(2)">test</li>
                        </ul>
                    </li>
                    <li>Feb</li>
                    <li>Mar</li>
                </ul>
            </li>
            <li id="newsID1" class="newsYear">
                <p>2011</p>
                <ul class="newsMonths" style="display:none">
                    <li>Dec
                        <ul class="newsArticles" style="display:none">
                            <li onClick="newsID(1)">Test</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

これで、上記のコードは実行されず、firebugにエラーなどが表示されます。

だから私はそれが実行されない理由について少し迷っています、alert（）も実行されません。

4

7 に答える 7

41

まず、ターゲットに到達していることを確認し、これを試して、アラートが表示されるかどうかを確認します。

$(function() {
    $(document).on('click', '#news', function() {
       alert('ok');
    });
});

#news要素をクリックしたときにアラートが表示されれば、問題ありません。

今この行に：

$.get("http://<? echo ROOT; ?>includes/functions.php",

省略形のPHPオープニングを使用していて、それをオンにする必要がある場合は、試してみてください。

<?php echo ROOT; ?>

しかし、その欠陥はROOTであり、これまでに見たことはなく、ROOTのPHPマニュアルにも何も見つからなかったため、最新バージョンのPHPを使用して自分のサーバーで試したところ、「ROOT」が存在しないためエラーが発生しました。代わりに、それが文字列であると想定し、「ROOT」をエコーし​​ただけなので、リンクは次のようになります。

$.get("http://ROOTincludes/functions.php",

自分で定義した変数です。ドル記号で始める必要があります。定義したものである場合はdefine()、正しく設定されていることを確認してください。そのようなものを使用している$_SERVER['DOCUMENT_ROOT'];場合は、JavaScriptでアクセスできるものとは限りません。通常、Webルートよりも上位のフォルダーであり、クライアント側ではアクセスできず、サーバー側でのみアクセスできます。

また、あなたがそれを書いた方法は、それから始めてhttp://、ドメイン名でなければなりません。ブラウザでビューソースを開いて、ajax関数を見つけて、ROOTが実際に出力するものを確認してください。最終的な出力はソースに表示され、含まれている構成ファイルなどでdefine（）を使用して設定されている場合はそれを確認できます。正しく設定されました。

PHPを実行するにはJavaScriptもPHPファイル内にある必要があります。または、PHPを介してJSファイルを実行するようにサーバー設定を変更する必要があります。

私の意見では、パスとファイル名を使用するのが正しい方法です。これを試して、コンソール（F12）に注意してください。

$(document).on('click','#news',function() {
    var active = 1;
    var XHR = $.ajax({
                   type: 'GET',
                   url : '/actualpath/includes/functions.php',
                   data: { pressmediaNews: active }
              }).done(function(data) {
                   console.log(data);
              }).fail(function(e1, e2, e3) {
                   console.log('error : '+e1+' - '+e2+' - '+e3);
              });
    $("#loading").show();
    $("#overlay-content").fadeOut(1000, function() {
        XHR.done(function(data) {
            $("#overlay-content").empty().append(data).fadeIn(1000);
            $("#loading").hide(400);
        });
    });
});
于 2012-05-17T13:05:51.477 に答える
10

デリゲートを使用します。

$('#overlay-content').on('click', '#newsID2', function() { });

これにより、イベントがバインドされ#overlay-content、バブルイベントがから発生したかどうかがチェックされ#newsID2ます。

補足として：イベントハンドラーにタイプミスがあり（chikdrenである必要があります）、この醜いインラインイベントchildrenを実際に取り除く必要があります。onClick

于 2012-05-02T15:21:15.717 に答える
5

より似ている必要があります：

$("#overlay-content").on('click', '#newsID2', function() {
    ....
});

または言い換えれば：

$('.wrapper').on('event', '.target', function() {
    ...
});

はすでに.wrapper存在する要素（またはドキュメント）であり、.targetはイベントを実行するラッパー内の要素です。

このlive関数は基本的に次のものと同等です。

$(document).on('event', '.target', function() { 
    ... 
});
于 2012-05-02T15:21:12.517 に答える
3

http://bugs.jquery.com/ticket/11203

キーセンテンス

新しいHTMLがページに挿入されている場合は、要素を選択し、新しいHTMLがページに配置された後にイベントハンドラーをアタッチします。

このシナリオで作業するには、セレクターパラメーターを使用してドキュメントオブジェクトにバインドしてみてください。

$(document).on('click','#news',function() {...}
于 2012-05-10T18:09:56.440 に答える
0

以前に.live（）を使用したことがあるとおっしゃっていたので、ここでの問題は、ドキュメントに追加する前に、ドキュメントに追加したものをクリックをバインドしようとしていることである可能性がありますか？

ライブを使用すると、この種のものが自動的に処理されますが、ライブを使用しない場合は、通常、イベントをバインドする前にページ上に存在する必要があります。AJAXを使用して何かを追加する場合、AJAXを使用してそれらをロードする前に、それらのクリックイベントを設定することはできません。.live（）を使用すると、事前にこれを行うことができます。

私はこのようにします：

$("#overlay-content").on('click','#news',function() {
        var active = 1;
        $("#loading").show();
        $("#overlay-content").fadeOut(1000, function() {
            $.get("http://<? echo ROOT; ?>includes/functions.php", { pressmediaNews: active }, function(data) {
                $("#loading").hide(400);
                $("#overlay-content").empty().append(data).fadeIn(1000);

                //put your delegate/call/function,etc here

            });
        });
    });
于 2012-05-15T16:03:55.807 に答える
0

ニュース-左パネル

year_Month_newsIDニュースの年、月、ニュースID。たとえば、2012_5_16、2012_5_17など_

<div id="news-left-panel">
    <h4>News Section</h4>
    <ul>
        <li id="newsID2" class="newsYear">
            <p>2012</p>
            <ul class="newsMonths" style="display:none">
                <li>Jan
                    <ul class="newsArticles" style="display:none">
                        <li id="year_Month_newsID">test</li>
                    </ul>
                </li>
                <li>Feb</li>
                <li>Mar</li>
            </ul>
        </li>
        <li id="newsID1" class="newsYear">
            <p>2011</p>
            <ul class="newsMonths" style="display:none">
                <li>Dec
                    <ul class="newsArticles" style="display:none">
                        <li id="year_Month_newsID">Test</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Jquery関数

$("#news-left-panel ul li").live("click", function(event) {
            var news=(this.id).split("_");
            var year=news[0];
            var month=news[1];
            var newsID =news[2];

            $.ajax({
                type: "POST",
                url: 'http://<? echo ROOT; ?>includes/functions.php',
                data: {
                    year: year,month:month,newsID :newsID
                },
                error: function(){
                    $('#news').html( "<p>Page Not Found!!</p>" );
                    // Here Loader animation
                },
                beforeSend: function(){
                    // Here Loader animation
                    $("#news").html('');
                },
                success: function(data) {
                    $('#news').html(data);

                }
            });
        });​
于 2012-05-16T05:33:02.703 に答える
0

Ajax呼び出しが正しい/正しいHTMLを返していることを確認しますか？

ここで$.get（）をsetTimeout（）に置き換えました（そして少し簡略化しました）：http：//jsfiddle.net/q23st/

動作しているように見えるので、$。get（）が期待どおりの値を返さないのではないかと思います。

于 2012-05-16T11:49:27.973 に答える