Jquery元素没有重新绑定+ HTMLDivElement无法识别的表达式

Jquery elements not rebinding + HTMLDivElement unrecognized expression

本文关键字：HTMLDivElement 识别 表达式 绑定 元素 新绑定 Jquery      更新时间：2023-09-26

我正在为我的网站上需要动态刷新的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控制器/logout。之后，它会加载带有刷新内容的页面，但是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类到需要动态刷新的包装器

很难确切地说出您想从this得到什么，正如您对.load()的调用所示。你的错误出现的原因是因为你隐式地将this转换为字符串。结果是"[object HTMLDivElement]"，它使您的调用看起来像这样

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

，这应该可以解释错误发生的原因。你需要从那个位置的div元素中得到什么?

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

但是，由于您已经使用$(this)开始了这个链，因此调用.load将已经将在refreshUrl中加载的内容应用于当前的this元素。

所以你所需要做的就是

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

或者您希望在加载数据时显示淡出，在这种情况下将使用$(this).hide().load(refreshUrl).fadeIn("slow");

相关文章：