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控制器。之后，它使用刷新的内容加载页面，但jquery点击事件不会重新绑定，因此我必须刷新才能在注销后再次登录。但是，在登录发生后，元素会重新绑定。我认为使用.on（）可以解决这个问题，但事实并非如此。

2）元素被复制，因为我无法在refreshDiv函数中实现'this'。我收到一个错误：

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或本机调用即可从该点获取信息，例如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");。

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

1 个答案: