jQuery html()的不确定行为

时间:2015-09-09 06:48:40

标签: javascript jquery html ajax

我正在使用 jQuery 1.11.1 。我已将其从1.6.1.1升级。为了升级jQuery,我跟随jQuery upgrade guide,因为版本1.9.0引入了许多重要的更改。我已将 jQuery migrate 1.2.1版放在资源路径中。

最近我遇到了一个问题,即jQuery没有设置' html内容。我引用了'设置' ,因为当我提醒(jquery_selector).html()时,它会显示正确的内容值,但是当我使用浏览器检查选择器元素时检查元素功能,它没有那个内容。这是代码片段:

try {
    widget.element.empty().html(data);
    // document.getElementById(widget.element.prop("id")).innerHTML = data;
    // alert("HTML Content set: " + widget.element.html());
    widget.element.fadeIn('fast');
} catch (ex) {
    alert("Exception in setting and fadeIn()" + ex);
}

这里data是使用Ajax请求收到的html内容。正确收到状态代码为200的数据。

在设置内容的任何一种情况下(jquery html()或innerHTML),元素的html()的警告给出与data相同的结果。

执行此代码时未发现任何错误或异常。

任何人都可以指导我在哪里犯错吗?或者我在升级jQuery时缺少任何步骤?

Javascript文件:

var ajaxPanel = {
    options:{
        opened:false,
        triggerEvent:'click'
    },

    _init:function () {
        var widget = this;
        $(document).on(widget.options.triggerEvent, this.options.trigger, function () {
            if (widget.options.triggerValue) {
                if ($(this).val() == widget.options.triggerValue) {
                    try {
                    widget.show();
                    }catch (ex) {
                        alert(ex);
                    }
                }
                else {
                    widget.hide();
                }
            }
            else {
                widget.show();
            }
        });
    },

    show:function () {
        var widget = this;
        var options = this.options;
        if (options.opened) {
            return;
        }
        $.ajax({
            url:options.contentUrl,
            success:function (data, textStatus, xhr) {
                if (checkLoginTimeout(xhr)) {
                    return;
                }
                if (options.group && !options.triggerValue) {
                    $("." + options.group).bssAjaxPanel('hide');
                }
                options.opened = true;
                widget.element.empty().html(data);
                widget.element.fadeIn('fast');
            },
            error:function (jqXHR, textStatus, errorThrown) {
                if (!ajaxErrorHandle(jqXHR)) {
                    widget.showErrors(errorThrown);
                }
            },
            cache:false
        });
    },

    hide:function () {
        if (!this.options.opened) {
            return;
        }
        var widget = this;
        this.options.opened = false;
        this.element.hide();
        this.element.empty();
    }
}

$.widget("ui.ajaxPanel", ajaxPanel);

Javascript小部件调用:

<input type="radio" name="messageType" value="1" id="mail" />
<label>Message Type Mail</label>
<div id="mailPanel" style="display: none;"></div>
<script type="text/javascript">$(document).ready(function(){$('#mailPanel').ajaxPanel({trigger:'input[name="messageType"]',triggerValue:'1',contentUrl:'<URL_TO_RESOURCE>'})});</script>

<input type="radio" name="messageType" value="2" id="content" />
<label>Message Type Content</label>
<div id="contentPanel" style="display: none;"></div>
<script type="text/javascript">$(document).ready(function(){$('#contentPanel').ajaxPanel({trigger:'input[name="messageType"]',triggerValue:'2',contentUrl:'<URL_TO_RESOURCE>'})});</script>

0 个答案:

没有答案