我在点击时打开一个对话框,里面有一个带有textarea的div。在同一页面上,我使用ajax调用来加载另一个div中的内容。
在我进行ajax调用之后,对话框中的文本字段在提交时没有传递值,但在ajax调用之前它完全正常。
Jquery
$(document).ready(function() {
$("#popup").dialog({
autoOpen: false,
title: "Popup",
show: {
effect: "fade",
duration: 150
},
hide: {
effect: "fade",
duration: 150
},
clickOutside: true,
clickOutsideTrigger: "#btn"
});
$("#btn").click(function() {
$("#popup").dialog("open");
});
});
$.widget("ui.dialog", $.ui.dialog, {
options: {
clickOutside: false,
clickOutsideTrigger: ""
},
open: function() {
var clickOutsideTriggerEl = $(this.options.clickOutsideTrigger);
var that = this;
if (this.options.clickOutside) {
$(document).on("click.ui.dialogClickOutside" + that.eventNamespace, function(event) {
if ($(event.target).closest($(clickOutsideTriggerEl)).length == 0 && $(event.target).closest($(that.uiDialog)).length == 0) {
that.close();
}
});
}
this._super();
},
close: function() {
var that = this;
$(document).off("click.ui.dialogClickOutside" + that.eventNamespace);
this._super();
},
});
HTML
<button type="button" id="btn>Open Popup</button>
<div id="popup" style="display:none;">
<textarea id="textID" style="resize:none"></textarea></div>
引发问题的Ajax调用
$('.link').on('click', function (e) {
var load= $(this).attr('href');
var $this = $(this);
if(load == "#open") {
$.ajax({
type: 'post',
url: "/page/view/" + $(this).parents("[data-id]").attr("data-id"),
complete: function (event) {
$("#content").contents().remove();
$("#content").append(event.responseText);
}
});
}
});