jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了每次刷新时,jQuery点击操作仅触发一次大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在我的网站的管理部分编写了一个jQuery代码,可以在不刷新页面的情况下使网站脱机.它的效果很好,但有一点:

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

使用某些PHPHTML代码

<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>@H_673_8@

解决方法

请尝试使用事件委派,因为您在每次单击时都会重写HTML并且绑定正在丢失.通过使用事件委托,您将绑定DOM中当前元素的事件以及将附加到DOM的未来元素,例如由AJAX调用产生的元素.

使用

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

代替

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

如果#site_status也被覆盖,则使用文档.

大佬总结

以上是大佬教程为你收集整理的每次刷新时,jQuery点击操作仅触发一次全部内容,希望文章能够帮你解决每次刷新时,jQuery点击操作仅触发一次所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。