Question

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

当我点击TURN ON时，ajax调用准确无误，所有类都被更改，文本被更改为TURN OFF。但是，当我点击此文本时，没有任何反应。如果我重新加载页面，那么我将能够。

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

ONLINE OFFLINE

使用某些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>

Answer 1

尝试使用事件委派，因为您在每次单击时都重写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。

Answer 2

要扩展@ Alexander的答案，问题在于您动态生成HTML内容，但在文档初始化时添加侦听器。这意味着您在绑定时尝试绑定到的某些元素尚未。因此，从不创建听众。解决方案是使用jQuery .on来＆＃34; listen＆＃34;对于尚不存在的元素的事件：

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

应该是：

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

同样地：

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

应该是：

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

然而，正如其他人所表达的那样，更好的解决方案是稍微清理代码并显示/隐藏各自的状态与动态生成它们。

Answer 3

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

编辑：如果您只想要一个按钮（看起来这是您想要重读的问题） - 以下代码有效。顺便说一句，我在你的场景中想到的唯一方法（以及这个演示的目的）就是从“关闭”开始，否则你需要拿出自己的ajax来“检查”服务器是否是打开或关闭然后将适当的代码放入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;
}

结束编辑

ORIGINAL ANSWER - 带有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点击操作仅触发一次

3 个答案: