jquery - Mvc 模态弹出窗口与 jQuery 1.5.1.js 一起使用，但单击多次加载，不适用于最新版本（1.8.2.js）

Question

<script type="text/javascript">

    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $(".openPopup").live("click", function (e) {
            e.preventDefault();
            debugger;
            $("<div></div><p>")
            .addClass("dialog")
            .attr("id", $(this)
            .attr("data-dialog-id"))
            .appendTo("body")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                close: function () { $(this).remove(); },
                modal: true,
                height: 250,
                width: 900,
                left: 0

            })
            .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });
</script>

我的 Calling razor 语法如下：-

 @Html.ActionLink("open modal popup", "About", "Home", null, new { @class = "openPopup", data_dialog_id = "popuplDialog", data_dialog_title = "Popup"})

Answer 1

从 开始jQuery 1.7，该.live()方法已被弃用。用于.on()在新的 jQuery 版本中附加事件处理程序。你的代码有问题，$("<div></div><p>")应该是$("<div></div>")

$.ajaxSetup({ cache: false });

$(document).ready(function () {
    $(".openPopup").on("click", function (e) {
        e.preventDefault();
        $("<div></div>")
        .addClass("dialog")
        .attr("id", $(this).attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove(); },
            modal: false,
            height: 250,
            width: 900
        })
        .load(this.href);
    });
});

JSFiddle