jquery - jQuery 点击动作只触发一次，每次页面刷新

Question

我在我的网站的管理部分编写了一个 jQuery 代码，它可以在不刷新页面的情况下使网站脱机。它工作得很好，但有一件事：

当我单击打开时，准确地进行了 ajax 调用并且所有类都被更改并且文本被更改为关闭。但是，当我单击此文本时，没有任何反应。如果我重新加载页面，那么我将能够。

$("#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 中的当前元素和将附加到 DOM 的未来元素，例如那些由 AJAX 调用产生的元素。

采用

$("#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

以下代码适用于您的情况：

编辑：如果您只想要一个按钮（这似乎是您在重读问题时想要的） - 以下代码有效。顺便说一句，在您的场景中（以及出于此演示的目的）我能想到的唯一方法是从“关闭”开始，否则您需要提出自己的 ajax 来“检查”服务器是否处于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 事件更改为完成 - 您将其更改回成功以用于您的目的）

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 点击动作只触发一次，每次页面刷新

3 回答 3

Related

Reference