Javascript Jquery元素不重新绑定+；HtmlLevel无法识别的表达式

我正在为我的站点上需要动态刷新的div元素创建一个动态刷新功能

$(document).ready(function() {

        function refreshDiv() {
            var refreshUrl =  window.location.pathname;

            $('.refreshable').each(function() {
                $(this).fadeOut("slow", function() {
                    $(this).hide().load(refreshUrl + " " + this, "").fadeIn("slow");
                });
            });
        }

        $(document.body).on("click", ".login_button.submit", function(e) {
            e.preventDefault();
            var username = $('#username').val();
            var password = $('#password').val();

            $.ajax({
                type : "POST",
                url : '/login',
                data : {username:username, password:password},

                success:function(response) {
                    if(response.status == 'success') {

                        $('#sb-site').animate({'opacity': '1'}, 300);
                        $('#login_form').toggle();
                        refreshDiv();

                    } else {
                        console.log('Something went wrong');
                    }
                },
                error:function(response) { 
                    console.log('Something went wrong');
                }
            });
        });

        $(document.body).on("click", ".logout_button", function(e) {
            e.preventDefault();

            $.ajax({
                type : "POST",
                url : '/logout',

                success:function(response) {

                    if(response.status == 'success') {
                        refreshDiv();
                    } else {
                        console.log('Something went wrong');
                    }

                },
                error:function(response) { 
                    console.log('Something went wrong');
                }
            });
        });
    });

我有几个问题要提

1） 单击注销后，它在/logout处调用Laravel控制器。之后，它会用刷新的内容加载页面，但是jquery单击事件不会重新绑定，所以我必须刷新才能在注销后再次登录。但是，元素在登录后会重新绑定。我认为使用.on（）可以解决这个问题，但事实并非如此

2） 元素被复制，因为我在将“this”实现到refreshDiv函数中时遇到问题。我得到一个错误：

Uncaught Error: Syntax error, unrecognized expression: [object HTMLDivElement]

如果我这样做，这就不会发生

$(this).hide().load(refreshUrl + " .refreshable>*", "").fadeIn("slow");

但我需要它单独重新加载每个特定的目标元素，或者它将内容与匹配的类重叠。我试过：

$(this).hide().load(refreshUrl + " " + this, "").fadeIn("slow");

---

我的目标是能够有一个可扩展的解决方案，只需将.refresh类添加到需要动态刷新的包装器中。

很难准确地说出您希望从

中得到什么，如调用
.load（）
所示。出现错误的原因是您正在将
this
隐式转换为字符串。结果是
“[object htmldevelment]”
，这使您的调用看起来像这样

$(this).hide().load(refreshUrl + " " + "[object HTMLDivElement]", "").fadeIn("slow");

这就清楚了为什么会发生错误。您需要从该点的div元素中获得什么

要访问当前div，只需使用
prop
或
attr
或本机调用从该点获取信息，例如
this.className
或
this.id
或
$（this.data（'location'）
等

但是，由于您已经使用
$（this）
启动了此链，因此调用
.load
将已将refreshUrl中加载的内容应用于当前
此
元素

所以你真正需要做的就是

$(this).hide().load(refreshUrl,function(){
    $(this).fadeIn('slow'); // only fade in once content is loaded
});

或者，您可能希望在加载数据时淡入淡出，在这种情况下，
$（this）.hide（）.load（refreshUrl）.fadeIn（“慢”）。
使用.attr只返回.refreshable，我一次只需要一个.refreshable类。$（this）正在使用该类引用当前选定的div；在本例中为“可刷新”。我明白为什么htmldivelement现在不起作用了。谢谢我尝试实现您的代码，但它似乎抛出了一个错误，即主线程上的同步XMLHttpRequest已被弃用，因为它会对最终用户的体验产生有害影响。加上它似乎打破了我的X-CSRF。我不确定这是从哪里来的。