每次刷新时,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>

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

要扩展@Alex的答案,问题在于您是动态生成HTML内容,而是在文档初始化时添加侦听器.这意味着您尝试绑定的某些元素在绑定时尚不存在.因此,从不创建听众.解决方案是使用jQuery .on"监听"尚不存在的元素上的事件:

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

应该:

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

同样地:

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

应该:

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

但是,正如其他人所表达的那样,更好的解决方案是稍微清理代码并显示/隐藏相应的状态与动态生成它们.