javascript - jquery を使用したイベントの再バインドが機能しない

Question

プレゼンテーションレイアウトのページ設定があります。

+------------------------+
|prev                next|
|+----------------------+|
||         page         ||
||   dynamic content    ||
||                      ||
|+----------------------+|
+------------------------+

上記の例では、次/前は、次を使用して動的コンテンツを制御するナビゲーションボタンです。$("page").load(url);

ページの 1 つに、ポップアップのコンテンツを制御する ajax 呼び出しにリンクされているボタンがあるポップアップがあります。

これらのボタンは、ページが最初に読み込まれたときに適切に機能します。ページを (ナビゲーションボタンを使用して) 変更してから元に戻すと、ポップアップは開きますが、ボタンは機能しません。ボタンをクリックしてポップアップを閉じ、再度ポップアップを開くと、最初のクリックで要求した情報が表示されますが、ボタンはまだ機能しません。

これは、ajax リクエストに問題がないことを示しています。要素のバインディングに問題があります。これが私のJavascriptです：

$('#resTable').on('click',this,function() {
    $('#ayAvgDPm').html("");
    $('#aoAvgDPm').html("");
    $('#ayTotProfit').html("");
    $('#aoTotProfit').html("");
    $('#ayAvgPcPm').html("");
    $('#aoAvgPcPm').html("");
    $('#ayTotPcProfit').html("");
    $('#aoTotPcProfit').html("");
    $('#ayrRes').html("");
    $('#etfProductPopup').bPopup();
});

$('div[class^="sideNav"]').on('click',this,function() {

    $('#yrSummary').fadeIn(200);

    $('#yAvgDPm').html("");
    $('#oAvgDPm').html("");
    $('#yTotProfit').html("");
    $('#oTotProfit').html("");
    $('#yAvgPcPm').html("");
    $('#oAvgPcPm').html("");
    $('#yTotPcProfit').html("");
    $('#oTotPcProfit').html("");
    $('#yrRes').html("");

    var yr = "20"+$(this).attr('class').substr(-2);

    var req = $.ajax({
        url : '../includes/prod_results.php',
        type : 'POST',
        dataType : "json",
        data : {
            y : yr,
            t : 'ETF'
        },
        success : function(j) {
            var table = "<table cellspacing='0'><tr><th>Year</th><th>Returns</th></tr>";
            for(var i = 0; i < 12; i++) {
                if (i === 5 && yr === '2014'){
                    break;
                }
                var obj = j[i];
                var month = obj['month'];
                var profit = obj['profit'];
                var bal = obj['bal'];
                table += "<tr><td style='width:75px'>"+month+"</td><td style='padding: 0 15px'>"+parseFloat(profit).toFixed(2)+"%</td><td style='width:75px'>$"+comma(parseFloat(bal).toFixed(2))+"</td></tr>";
                if (i === (11)) {
                    table += "</table>";
                }
            }
            var YAvgDPm = comma(parseFloat(j.YAvgDPm).toFixed(2));
            var OAvgDPm = comma(parseFloat(j.OAvgDPm).toFixed(2));
            var YTotProfit = comma(parseFloat(j.YTotProfit).toFixed(2));
            var OTotProfit = comma(parseFloat(j.OTotProfit).toFixed(2));
            var YAvgPcPm = comma(parseFloat(j.YAvgPcPm).toFixed(2));
            var OAvgPcPm = comma(parseFloat(j.OAvgPcPm).toFixed(2));
            var YTotPcProfit = comma(parseFloat(j.YTotPcProfit).toFixed(2));
            var OTotPcProfit = comma(parseFloat(j.OTotPcProfit).toFixed(2));

            $('#yAvgDPm').html("$"+YAvgDPm);
            $('#oAvgDPm').html("$"+OAvgDPm);
            $('#yTotProfit').html("$"+YTotProfit);
            $('#oTotProfit').html("$"+OTotProfit);
            $('#yAvgPcPm').html(YAvgPcPm+"%");
            $('#oAvgPcPm').html(OAvgPcPm+"%");
            $('#yTotPcProfit').html(YTotPcProfit+"%");
            $('#oTotPcProfit').html(OTotPcProfit+"%");
            $('#yrRes').html(table);
            $('#yrGraph').html("<img src='../images/graphs/etf_"+yr+".jpg'>");
            return false;
        }
    });
    return false;
});

かなり長いのは承知しております...

$(document).ready()上記のスクリプトをハンドラーの内側と外側の両方で試しました。

誰かが私がしていないことについて私を助けてもらえますか?

EDIT要求に応じて、HTML:

<table id="resTable" cellspacing="0">
    <tr>
        <th>Year</th>
        <th> 1st Quarter</th>
        <th>2nd Quarter</th>
        <th>3rd Quarter</th>
        <th>4th Quarter</th>
        <th>Year Total</th>
        <th>Month Avg</th>
    </tr>
...
</table>

<div id="etfProductPopup">
<h1 style="text-align:center">ETF - Compounded Results</h1>
<div id="popupLeftBar">
    <div class="sideNav14">
        2014
    </div>
    <div class="sideNav13">
        2013
    </div>
    <div class="sideNav12">
        2012
    </div>
    <div class="sideNav11">
        2011
    </div>
    <div class="sideNav10">
        2010
    </div>
    <div class="sideNav09">
        2009
    </div>
    <div class="sideNav08">
        2008
    </div>
    <div class="sideNav07">
        2007
    </div>
    <div class="sideNav06">
        2006
    </div>
    <div class="sideNav05">
        2005
    </div>
    <div class="sideNav04">
        2004
    </div>
    <div class="sideNav03">
        2003
    </div>
</div>
<div id="popupMain">
    <div id="yrSummary">
        <table cellspacing="0">
            <tr>
                <th></th>
                <th>Avg<br>$/Mth</th>
                <th>Total<br>$ Profit</th>
                <th>Avg<br>%/Mth</th>
                <th>Total<br>% Profit</th>
            </tr>
            <tr>
                <th>Year</th>
                <td id="yAvgDPm"></td>
                <td id="yTotProfit"></td>
                <td id="yAvgPcPm"></td>
                <td id="yTotPcProfit"></td>
            </tr>
            <tr>
                <th>Overall</th>
                <td id="oAvgDPm"></td>
                <td id="oTotProfit"></td>
                <td id="oAvgPcPm"></td>
                <td id="oTotPcProfit"></td>
            </tr>
        </table>
    </div>
    <div id="yrGraph"></div>
    <div id="yrRes"></div>
</div>

本当に？これについて他のアイデアを持っている人はいませんか？私は本当にあなたたちがこれについて私のために来てくれる必要があります!

ナビゲーションボタンのコード:

function nav(d) {
n = page + d;
$('#slide').load('p/'+n+'.php');

}

HTML:

<div class="prev" onClick="nav(-1)" title="Previous Page">&lt;&lt; Previous</div>
<div class="next" onClick="nav(1)" title="Next Page">Next &gt;&gt;</div>

編集

だから私は（現在の）答えの3つすべてを試しましたが、どこにも行きません! これは非常にイライラします！

根本的な問題がいくつかある可能性があり、バインディングが完全な問題ではないと考え始めています。

ブラウザによって更新されたかのようにページをロードする必要があることは明らかです。ロード方法に関係なく、ページが最初にロードされたときに正常に動作するという事実は、バインディングがすべて正常であることを示しています。

このページは、ポップアップがなくても正常に機能します。

バインディング以外に、根本的な問題が何であるかについてのアイデアはありますか?

また、問題の Web ページへのリンクを私が公開することは SO の規則に違反していることは承知していますが、リンクを希望する人がいる場合は、個人的に提供したいと思います。問い合わせてください。

編集

したがって、次のスクリプトを使用した後でも、非表示の div (ポップアップ用) に値が設定されたままになっていると思います。

$('#etfProductPopup').bPopup({
        onClose : function() {
            postLoadBindings();
            $('#ayAvgDPm').html("");
            $('#aoAvgDPm').html("");
            $('#ayTotProfit').html("");
            $('#aoTotProfit').html("");
            $('#ayAvgPcPm').html("");
            $('#aoAvgPcPm').html("");
            $('#ayTotPcProfit').html("");
            $('#aoTotPcProfit').html("");
            $('#ayrRes').html("");
        }
    });

問題はポップアップスクリプトにあるのではないかと考えています...

https://raw.githubusercontent.com/dinbror/bpopup/master/jquery.bpopup.min.js

編集

また、ページの読み込み時にポップアップ div が複製されていることにも気付きました。コンソールから:

<div id="etfProductPopup" style="display: none; left: 440px; position: absolute; top: 156px; z-index: 2147483650; opacity: 0;">...</div>

<div id="etfProductPopup" style="display: none; left: 440px; position: absolute; top: 156px; z-index: 2147483650; opacity: 0;">...</div>

編集

(はい、「自分の質問に対する最も多くの編集」のバッジがあれば、私が勝っていただろうと思いますが、提供するデータが多いほど、回答の可能性が高くなると思います)

別のページに要素を作成しました#resTable（前と同じ方法でロードされました）。$('#resTable').unbind()ドキュメントレディハンドラーで使用しているときでも、要素をクリックすると前のページからポップアップが表示されることに気付きました!

コンテンツは言うまでもなく、ポップアップのスクリプトがそのページに存在しない場合、これはどのように可能ですか??

誰かお願いします！これには合理的な説明が必要です。私は人間をプログラムしようとしているのではありません.

誰かがこれで私を助けてくれますか?

ここまで:ポップアップは、外側のページ (ナビゲーションボタンのあるページ) 内に重複した div を作成しています。divの元のコードを含むページだけでなく、ページ全体に適切にレイヤーされるように、これを行っていると思います。

編集

何が起こっているかについて、より詳細に見ていきます。ポップアップの div は、コンテナーではなく、明らかにページ内にあります。bPopup は、div を<body>含むページのタグ内に移動しています。これは、div が bPopup の呼び出し後に移動したすべてのページで使用できることを意味します。ポップアップを閉じてもdivは元に戻らないため、ナビゲーションボタンを使用してページをリロードすると、divが複製されます。

最新の進捗状況

クライアントと話した後、残念ながらライブリンクを作成できません。また、jsFiddle を作成するには時間がかかります。

上記の編集で説明したように、問題は bPopup が親ページ内にポップアップ div を再作成し、ポップアップを閉じるときにそれを削除しないことです。

ページ上の要素を削除する方法があるかどうかわかりません。問題は、要素を削除できる場合、bpopup が作成するコピーはオリジナルとまったく同じであるため、複製を対象とするスクリプトはオリジナルも対象とすることです。

score 1 · Accepted Answer

@Sudhir が言及したイベント委任は機能するはずですが、問題に直面している場合は、ページが読み込まれるたびに新しいイベントを強制的にバインドしてみてください。何かのようなもの -

PrevとNextボタンがあるメインページで、すべての機能を定義します-

var bindEvents = function(){
    //we are unbinding to make 
    //sure we are not attaching more than once since
    //instead of on, I am using direct CLICK binding.
    $('#resTable').unbind("click").click(function() { 
        ....
    });

    $('div[class^="sideNav"]').unbind("click").click(function() {
        ....
    });
};

var nav = function(d) {
    n = page + d;
    $('#slide').empty();
    $('#slide').load('p/'+n+'.php', function(){
         //bind events
         bindEvents();
    });
}

$(function(){
    //the first page call, when page loads
    nav(0);
});

これは最善の方法ではありませんが、これにより、他の問題が確実に解決されることを覚えておいてください。このバインディングが機能する場合は、問題を切り分けて、バインディングの使用方法に問題があることを確認できます。それでもうまくいかない場合はお知らせください。

score 0 · Accepted Answer

これを試して

$("body").delegate('#resTable','click',function() {
    //some codes
}


$("body").delegate('div[class^="sideNav"]','click',function() {
    //some codes
}

javascript - jquery を使用したイベントの再バインドが機能しない

4 に答える 4

Related

Reference