我正在使用 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>