在jQuery 1.9中使用fadeIn未捕获TypeError [英] Uncaught TypeError with fadeIn in jQuery 1.9

问题描述

这是问题，不幸的是我们必须支持IE8 。

所以我不得不从使用最新的jQuery 2.0+改为 jQuery 1.9 。

Here is the problem, unfortunately we have to support IE8.
So I had to change from using the latest jQuery 2.0+ back to jQuery 1.9.

现在我们使用了很多jQuery来加载我们的不同部分仪表板，我们 fadeOut 以前的屏幕和 fadeIn 新屏幕。我以为我已经解决了所有这些问题，我发现这里（prepend html）和< a href =https://stackoverflow.com/questions/15258924/line-breaks-in-jquery-ajax-html-callback-cause-errors> here（ajax HTML）。

Now we use a lot of jQuery to load up different sections of our dashboard, we fadeOut previous screens and fadeIn new screens. I thought I had fixed all of these problems with solutions I found here(prepend html) and here(ajax HTML).

但是还有一个问题与以下相同的错误信息：

However still having one more problem with the same error message below:

错误：

Uncaught TypeError: Cannot set property 'cur' of undefined 

我已经将源缩小到用于切换内容的 loadResource 函数。

基本上，如果我从下面的函数中注释掉这一行：

Basically if I comment out this line from the function below:

$content.fadeIn('fast');

将其替换为

$content.show();

问题已解决，我们不再得到cur错误。

The problem is solved and we no longer get that 'cur' error. However we lose our fadeIn effect.

你如何解决这个问题，解决这个问题在jQuery 1.9 中未保留TypeError ，同时保持 fadeIn 效果< $ content ？

How would you approach this problem that solves the Uncaught TypeError in jQuery 1.9 while keeping our fadeIn effect on $content?

var loadResource = function(url, params, callback) {
WHOAT.networking.getToServerWithAjax(url, params, function (response) {
        var $content = $($.parseHTML(response.trim()));
        var $container = $('#dashboard-display');
        var $content_to_hide = $container.children();

        $.when($content_to_hide.fadeOut('fast')).then(function () {
            $content.hide();
            $container.append($content);

            //$content.fadeIn('fast'); // <- buggy in 1.9.1
            $content.show(); // <- works, but no fadeIn

            $content_to_hide.remove();

            if(callback) {
                callback();
            }
        });
    });

// CSS updates...
};

推荐答案

STRANGE！

好吧，所以也许我是一个独特的案例，经过jQuery和我们的模板。我把它缩小到这个特定的模板（Mako / Python）：

Ok so maybe I'm a unique case, after fiddling around and going through jQuery and our templates. I narrowed it down to this particular template (Mako / Python):

##conditional to determine with the template should inherit from the base page
##it shouldn't inherit from the base page is it is being inserted into the page using ajax
<%!
    def inherit(context):
        if context.get('isPage'):
            return "base_dashboard.mak"
        else:
            return None
%>
<%inherit file="${inherit(context)}"/>

<div id="dashboard-profile-container">
    <%include file="widgets/profile_widget.mak" />
</div>

<div class="spacer-div"></div>

我所要做的只是删除space-div：

<div class="spacer-div"></div>

基本上面的模板正在加载页面的HTML造成问题。我三重检查了HTML，一切都很好，但由于某种原因，这个空的spacer div导致了Undefined错误

Basically the template above was loading the HTML for the page that was causing the problem. I triple checked the HTML, everything was good there, but for some reason this empty spacer div was causing that Undefined error

也许由于某些原因，当jQuery尝试使用额外的HTML节点时会导致问题呈现页面

Maybe for some reason that extra HTML node was causing an issue when jQuery tried to render the page

这篇关于在jQuery 1.9中使用fadeIn未捕获TypeError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！