JQUERY

Question

我正在尝试使用 .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="DialogX"></div>.

中创建了一个 <div id="DialogY"></div>

下一步我尝试制作一个JQuery对话框，其中插入的内容+先前存在于"DialogX"中的内容，但是，对话框中显示的内容是之前的内容进行了追加（仅 "DialogX" 中已有的内容）。看起来 DOM 没有刷新，尽管我使用了 .on() .

我尝试 console.log 新的 DialogX div 内容，但它在 "dialogY" 中未定义。

我相信 Jquery 文档指出返回 false 会停止 bubbling/propagation，但不返回 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>

我花了更多的时间，然后我为这个错误感到自豪。似乎每件事都是对的，但显然不是。

有人可以指出我做错了什么吗？或者缺少什么？可能是很明显的东西……但我想不通，那是什么……

非常感谢...

Answer 1

您对 on 的使用仅意味着点击处理程序将适用于新添加的元素。它与您关于具有 "stale" 内容的对话框的问题没有任何关系。

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

最简单的更改是将对 .html() 的调用推送到您的对话框点击处理程序中，这样当您要打开对话框时，对话框内容将 "calculated" 重新正确显示：

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

JQUERY - ajax 调用后冒泡

JQUERY - Bubbling after ajax call

javascript

html

jquery-ui

dom