gpt4 book ai didi

javascript - JQUERY - ajax 调用后冒泡

转载 作者:行者123 更新时间:2023-12-03 10:47:07 28 4
gpt4 key购买 nike

我正在尝试使用 .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="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 仅意味着点击处理程序适用于新添加的元素。它实际上与您有关对话框具有“陈旧”内容的问题没有任何关系。

您只需在 ready 处理程序中设置此变量:var content = $("#DialogX").html();一次。因此,contentDialogX div 从页面加载时开始的 HTML 内容,并且您永远不会更新 content.

最简单的更改是将对 .html() 的调用推送到对话框单击处理程序中,以便在您即将打开对话框时重新“计算”对话框内容:

$("body").on("click", ".addDialog", function () {                
AddDialog("I'm a Dialog", $("#DialogX").html(), function () { });
});

关于javascript - JQUERY - ajax 调用后冒泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28533661/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com