难以将事件处理程序附加到动态生成的模式窗口元素

Difficulty attaching event handler to dynamically generated modal window elements

本文关键字:模式 元素 窗口 动态 事件处理 程序      更新时间:2023-09-26

此问题是对这三个问题的不断学习/发现。这个问题对我来说是从这里开始的:

后第一次

后的第二个

现在,这篇文章是关于@StephenMuecke关于动态附加事件处理程序的帖子。这对我来说是新的,所以我不得不读起来,但现在我明白了这确实有意义。

在阅读了文档和大量SO帖子之后,我似乎仍然无法启动点击事件处理程序??

这次我决定采取不同的方法。我创建了一个jsfiddle来演示这个问题。http://jsfiddle.net/ramjet/93nqs040/17/

然而,为了在他们的框架内工作,我不得不从现实中改变一些jsfiddle。以下是实际代码。


启动模态的父窗口脚本。。。警报绑定确实会开火。

<script>
$(document).ready(function ()
{
    $("#new").click(function (e)
    {
        e.preventDefault();
        var ischanging = false;
        var financierid = 0;
        var detailsWindow = $("#window").data("kendoWindow");
        if (!detailsWindow)
        {
            // create a new window, if there is none on the page
            detailsWindow = $("#window")
                // set its content to 'loading...' until the partial is loaded
                .html("Loading...")
                .kendoWindow(
                    {
                        modal: true,
                        width: "800px",
                        height: "400px",
                        title: "@T("...")",
                        actions: ["Close"],
                        content:
                        {
                            url: "@Html.Raw(Url.Action("ActionName", "Controller"))",
                            data: { financierId: financierid, isChanging: ischanging }
                        }
                    })
                .data("kendoWindow").bind('refresh', function (e)
                {
                    alert('Bound');
                    $('document').on("click", "#save", function () { alert("i work");});
                }).center();
        }
        detailsWindow.open();

    });
</script>

我认为不需要模式完整的html,但如果需要,我会更新它。这正是我试图动态绑定的元素。

<input type="button" id="save" style="margin-right:10px;" value="Save Record" />

document不需要引号:

$(document).on("click", "#save", function () { alert("i work");});

"document"搜索document的元素,而不是实际的document

$("document").length; //0
$(document).length; //1