javascript - Jquery 元素未重新绑定(bind) + HTMLDivElement 无法识别的表达式

Question

我正在为网站上需要动态刷新的 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 Controller 。之后，它会加载刷新内容的页面，但 jquery 单击事件不会重新绑定(bind)，因此我必须刷新才能在注销后再次登录。然而，登录后这些元素可以正常重新绑定(bind)。我认为使用 .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 类添加到需要动态刷新的包装器即可。

Answer 1

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

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

这应该可以弄清楚错误发生的原因。您需要从该位置的 div 元素得到什么​​？

要访问当前 div，只需使用 prop 或 attr 或 native 调用即可从该点获取信息，例如 this.className 或 this.id 或 $(this).data('location') 等

但是，由于您已经使用 $(this) 启动了该链，因此调用 .load 已经将在刷新Url 处加载的内容应用于当前这个元素。

所以你真正需要做的就是

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

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