jquery - jQueryのクリックアクションは、ページの更新ごとに1回だけ発生します

Question

サイトの管理セクションに、ページを更新せずにサイトをオフラインにするjQueryコードを記述しました。それはうまく機能しますが、1つのことのために：

TURN ONをクリックすると、ajax呼び出しが正確に行われ、すべてのクラスが変更され、テキストがTURNOFFに変更されます。ただし、このテキストをクリックしても何も起こりません。ページをリロードすると、リロードできるようになります。

$("#switch_off").click(function() {
                $("#switch_off").html("<img style=\"padding-left:15px;\" src=\"/img/admin/ajax-loader.gif\">");
                $('#switch_off').removeClass('ttip_b')
                $.ajax({
                    url: "/settings/SwitchOffline",
                    type: "get",
                    data: '',
                    success: function(responseText, statusText, xhr, $form){ // Trigger when request was successful
                        $("#site_status").html("<span id=\"offline\" class=\"lbl error_bg\">Offline</span><span id=\"switch_on\" class=\"ttip_b\" title=\"Click to place Site Online\">Turn On</span>");
                    },
                    error: function(responseText){
                        //alert(responseText);
                    }   
                });
                return false;
            });

            $("#switch_on").click(function() {
                $("#switch_on").html("<img style=\"padding-left:15px;\" src=\"/img/admin/ajax-loader.gif\">");
                $('#switch_on').removeClass('ttip_b')
                $.ajax({
                    url: "/settings/SwitchOnline",
                    type: "get",
                    data: '',
                    success: function(responseText, statusText, xhr, $form){                            
                        $("#site_status").html("<span id=\"online\" class=\"lbl ok_bg\">Online</span><span id=\"switch_off\" class=\"ttip_b\" title=\"Click to place Site Offline\">Turn Off</span>");                          
                    },
                    error: function(responseText){
                        //alert(responseText);
                    }   
                });

                return false;
            });

オンラインオフライン

いくつかのPHPを使用したHTMLコード

<div class="user_info user_sep" style="width:90px;">
                            <p class="sepH_a">
                                <strong>Site Status</strong>
                            </p>
                            <?php
                            //debug($site_offline);
                            if($site_offline){
                            ?>                              
                            <span id="site_status">
                                <span id="offline" class="lbl error_bg">Offline</span>
                                <span id="switch_on" class="ttip_b" title="Click to place Site Online">Turn On</span>

                            </span>
                            <?php }else{ ?>
                            <span id="site_status">
                                <span id="online" class="lbl ok_bg">Online</span>
                                <span id="switch_off" class="ttip_b" title="Click to place Site Offline">Turn Off</span>

                            </span>
                            <?php } ?>
                        </div>

score 12 · Accepted Answer

クリックするたびに HTML を書き直し、バインドが失われているため、代わりにイベント委任を使用してみてください。イベント委任を利用することで、DOM 内の現在の要素と、AJAX 呼び出しの結果として DOM に追加される将来の要素のイベントをバインドします。

使用する

$("#site_status").on("click", "#switch_off", function() {
  ...
});

$("#site_status").on("click", "#switch_on", function() {
  ...
});

それ以外の

$("#switch_off").click(function() {
  ...
});

$("#switch_on").click(function() {
  ...
});

#site_statusも上書きされている場合は、を使用しますdocument。

score 10 · Accepted Answer

@Alexanderの答えを拡張すると、問題は、HTMLコンテンツを動的に生成しているが、ドキュメントの初期化時にリスナーを追加していることです。これは、バインドしようとしている要素の一部が、バインド時にまだ存在していないことを意味します。したがって、リスナーが作成されることはありません。解決策は、jQueryを使用.onして、まだ存在していない要素のイベントを「リッスン」することです。

$("#switch_off").click(function() {

する必要があります：

$(document).on('click', '#switch_off', function() {

そして同様に：

$("#switch_on").click(function() {

する必要があります：

$(document).on('click', '#switch_on', function() {

ただし、他の人が表明しているように、より良い解決策は、コードを少しクリーンアップして、その場で生成するのではなく、それぞれの状態を表示/非表示にすることです。

score 0 · Accepted Answer

あなたの場合、次のコードが機能します。

編集：ボタンが1つだけ必要な場合（質問を読み直すと、これが必要なようです）-次のコードが機能します。ちなみに、私があなたのシナリオで (そしてこのデモの目的のために) 考えることができる唯一の方法は、単に「オフ」として開始することです。 ON または OFF を選択してから、適切なコードを HTML (および適切な開始 JS) に配置します。私はそれを理解するためにあなたに任せます。方法は私にもありますが、それはあなたが望むかどうかを決めることです。

JSFIDDLE: http://jsfiddle.net/ytpv7/11/

HTML:

<div id="site_status"><span id='switch_on'> Offline Turn ON  </span></div>

JS:

$("#switch_on").click(ON);


function ON() {
    $.ajax({
        url : "/settings/SwitchOnline",
        type : "get",
        data : '',
        complete : function (responseText, statusText, xhr, $form) {
            var str = "<span id='switch_off'>" + 'Online Turn OFF' + "</span>";
      $("#site_status").html(str);
            $("#switch_off").click(OFF);
        },
        error : function (responseText) {
            //alert(responseText);
        }
    });

    return false;
}

function OFF() {

    $.ajax({
        url : "/settings/SwitchOffline",
        type : "get",
        data : '',
        complete : function (responseText, statusText, xhr, $form) {
            var str = "<span id='switch_on'>" + "Offline Turn ON" + "</span>";
      $("#site_status").html(str);
            $("#switch_on").click(ON);
        },
        error : function (responseText) {
            //alert(responseText);
      }
    });
    return false;
}

編集終了

元の回答-ONおよびOFFボタン付き（ajax結果のテキストも機能）：

(JSFIDDLE では、デモンストレーションの目的で ajax イベントを on complete に変更したことに注意してください。目的に合わせて成功に戻します)

http://jsfiddle.net/ytpv7/5/

HTML:

<div id="switch_off">OFF</div>
<div id="switch_on">ON</div>
<div id="site_status"></div>

JS:

$("#switch_off").click(OFF);

$("#switch_on").click(ON);

function ON() {
    $("#switch_on").html("<img style=\"padding-left:15px;\" src=\"/img/admin/ajax-loader.gif\">");
    $('#switch_on').removeClass('ttip_b');
    $.ajax({
        url : "/settings/SwitchOnline",
        type : "get",
        data : '',
        complete : function (responseText, statusText, xhr, $form) {
            var str = "<span id='online'>" + 'Online Turn OFF' + "</span>";
      $("#site_status").html(str);
            $("#online").click(OFF);
        },
        error : function (responseText) {
            //alert(responseText);
        }
    });

    return false;
}

function OFF() {
    $("#switch_off").html("<img style=\"padding-left:15px;\" src=\"/img/admin/ajax-loader.gif\">");
    $('#switch_off').removeClass('ttip_b')
    $.ajax({
        url : "/settings/SwitchOffline",
        type : "get",
        data : '',
        complete : function (responseText, statusText, xhr, $form) { // Trigger when request was successful
            var str = "<span id='offline'>" + "Offline Turn ON" + "</span>";
      $("#site_status").html(str);
            $("#offline").click(ON);
        },
        error : function (responseText) {
            //alert(responseText);
      }
    });
    return false;
}

jquery - jQueryのクリックアクションは、ページの更新ごとに1回だけ発生します

3 に答える 3

Related

Reference