[英]JQUERY - Bubbling after ajax call
我正在尝试使用.ajax()将内容追加到特定的div,并在Jquery对话框中使用新内容。 我相信我正确使用了.on(),但似乎没有刷新DOM。
要执行.ajax()调用,我使用以下代码(成功):
$(function () {
var AjaxCall = function () {
var $link = $(this);
var options = {
url: $link.attr("href"),
type: $link.attr("data-project-method"),
target: $link.attr("data-project-target"), //a.k.a "#DialogX"
data: null
}
//console.log(options);
$.ajax({
type: options.type,
url: options.url,
data: options.data,
success:function(data){
var id = "DialogID"
$('<div id="DialogY"></div>')
.html(data)
.appendTo(options.target);
//$(options.target).replaceWith(data);
}
});
console.log($("#DialogY").html());
return false;
};
$("body").on("click", "a[data-project-ajax='true']", AjaxCall);
});
调用成功,并将内容正确附加到指定的div。 我在<div id="DialogY"></div>
内创建了一个<div id="DialogY"></div>
<div id="DialogX"></div>
。
在下一步中,我尝试使用插入的内容+先前存在于“ DialogX”中的内容创建一个JQuery对话框,但是,对话框中显示的内容是添加之前的内容(仅“ DialogX”中已存在的内容) “)。 尽管我使用了.on(),但看起来DOM没有刷新。
我尝试console.log新的DialogX div内容,但是在“ dialogY”中未定义。
我相信在Jquery文档中,声明返回false会停止冒泡/传播,但是不返回false会使ajax调用重新加载所有页面。
在ajax调用之后,内容显示在页面上,而不显示在对话框上。
创建对话框(Bootstrap上的模态)的代码如下:
<script>
//// BOOTSTRAP MODAL ////
$(function () {
var content = $("#DialogX").html();
console.log(content);
$("body").on("click", ".addDialog", function () {
AddDialog("I'm a Dialog", content, function () { });
});
function AddDialog(title, content, callback) {
var $content = content;
var dlg = new BootstrapDialog({
title: title, //variable
message: $content, //variable
description: "Modal to Edit Platform Variables",
draggable: true,
closable: true,
closeByBackdrop: false, //Click outside Modal don't close it >> working
closeByKeyboard: false, // esc key Dont't close it >> working
type: BootstrapDialog.TYPE_DEFAULT, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
//var types = [
// BootstrapDialog.TYPE_DEFAULT, >> BEST
// BootstrapDialog.TYPE_INFO,
// BootstrapDialog.TYPE_PRIMARY,
// BootstrapDialog.TYPE_SUCCESS,
// BootstrapDialog.TYPE_WARNING,
// BootstrapDialog.TYPE_DANGER];
onshown: function (dialog) {
var tier = $('.bootstrap-dialog').length - 1;
dialog.$modal.prev(".modal-backdrop")
.css("z-index", 1030 + tier * 30);
dialog.$modal
.css("z-index", 1040 + tier * 30);
},
buttons: [{
label: 'OK',
icon: 'glyphicon glyphicon-send', // Imagem no botão
autospin: true,
cssClass: 'btn-primary',
action: function (dialogRef) {
if (callback !== "") { callback(); }
// dialogRef.close(); //autoClose
setTimeout(function () {
dialogRef.close(); // waites for X seconds to close
}, 1000);
}
}, {
label: 'Close',
cssClass: 'btn',
action: function (dialogRef) {
dialogRef.close();
}
}]
}).open();
}
});
</script>
我花了更多的时间,然后为这个错误感到骄傲。 似乎每件事都是对的,但事实显然并非如此。
有人可以指出我在做什么错吗? 还是缺少什么? 也许这很明显...但是我不知道这是什么...
非常感谢...
您对on
使用仅表示单击处理程序将适用于新添加的元素。 它与包含“陈旧”内容的对话框的问题实际上没有任何关系。
您正在设置此变量: var content = $("#DialogX").html();
一次,在您ready
处理程序中。 因此, content
是从页面加载之时起 DialogX
div的HTML内容,而您从不更新content
。
最简单的更改是将对.html()
的调用推入对话框单击处理程序中,这样,在您要打开对话框时,对话框内容将重新“计算”:
$("body").on("click", ".addDialog", function () {
AddDialog("I'm a Dialog", $("#DialogX").html(), function () { });
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.