将 jquery UI 的 dialog() 函数与 ajax 调用一起使用答案

【问题标题】：Using jquery UI's dialog() function with ajax call将 jquery UI 的 dialog() 函数与 ajax 调用一起使用
【发布时间】：2014-09-24 21:14:58
【问题描述】：

当用户单击表格单元格内的内容时，我试图显示一个弹出窗口（使用 Jquery UI 的 dialog() 函数）。我正在使用从 REST url 上的 Ajax 调用返回的数据填充表。我得到正确的数据并且表格显示正确。问题是表格单元格内的文本的 click() 函数没有被调用。

罪魁祸首似乎是 Ajax 调用，因为同样的方法适用于表内的静态数据。

来自 html 文件的片段：

            <head>
                $(document).ready(function(){
                            $("#dlg1").dialog({ autoOpen: false });
                            $('.linkClass1').click(function() {
                                $("#dlg1").dialog("open");
                            });
                            $.ajax({
                                url: "http://localhost:8080/abc/rest/def",
                                type: "GET",
                                contentType: 'application/json; charset=utf-8',
                                success: function(resultData) {
                                    var len = resultData.length;
                                    var table = $('<table></table>').addClass('tableClass1');
                                    var hRow = $('<tr></tr>');
                                    var hVar1 = $('<th></th>').addClass('headingClass1').text("col1");
                                    hRow.append(hVar1);
                                    table.append(hRow);
                                    for(i=0; i<len; i++)
                                    {
                                        row = $('<tr></tr>');
                                        var var1 = $('<td></td>').addClass('cellClass1');
                                        var linkVar1 = $('<a>')
                                                        .attr('class', 'linkClass1')
                                                        .attr('href', '#dummyId')
                                                        .text(resultData[i].id);
                                        var1.append(linkVar1);
                                        row.append(var1);
                                        table.append(row);
                                    }
                                    $(table).attr("id","tableId1");
// this table is appended to an html element and is correctly displayed
                                },
                             });
                        });
            </head>

        <body>

    <div id="dlg1" title="Basic dialog">
                    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
                </div>
        </body>

单击表格内的文本时，什么也没有发生，只是原始 url 附加了#dummyId。我还尝试在 click 函数中使用 alert() ，甚至没有显示。即使在 Ajax 调用中设置 async: false 也无济于事。

如果有人能帮忙，谢谢。

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

长答案

您为什么不使用href 或onclick 标记来调用所需的函数，而不是应用jQuery 点击处理程序：

function openDialog(){
    $("#dlg1").dialog("open");
}

...
for(i=0; i<len; i++) {
    row = $('<tr></tr>');
    var var1 = $('<td></td>').addClass('cellClass1');
    var linkVar1 = $('<a>')
        .attr('class', 'linkClass1')
        .attr('href', '#dummyId')
        .attr("onclick", openDialog)
        .text(resultData[i].id);
    var1.append(linkVar1);
    row.append(var1);
    table.append(row);
}
....

您还可以删除您已应用的 click 处理程序。

简答

只需将click 处理程序移到success 事件处理程序的末尾即可。这将确保在应用 click 处理程序时，所有 DOM 元素都出现在页面上。

$(document).ready(function(){
    $("#dlg1").dialog({ autoOpen: false });
    
    $.ajax({
        url: "http://localhost:8080/abc/rest/def",
        type: "GET",
        contentType: 'application/json; charset=utf-8',
        success: function(resultData) {
            var len = resultData.length;
            var table = $('<table></table>').addClass('tableClass1');
            var hRow = $('<tr></tr>');
            var hVar1 = $('<th></th>').addClass('headingClass1').text("col1");
            hRow.append(hVar1);
            table.append(hRow);
            for(i=0; i<len; i++)
            {
                row = $('<tr></tr>');
                var var1 = $('<td></td>').addClass('cellClass1');
                var linkVar1 = $('<a>')
                                .attr('class', 'linkClass1')
                                .attr('href', '#dummyId')
                                .text(resultData[i].id);
                var1.append(linkVar1);
                row.append(var1);
                table.append(row);
            }
            $(table).attr("id","tableId1");
            $('.linkClass1').click(function() {
                $("#dlg1").dialog("open");
            });
        },
     });
});

【讨论】：

【解决方案2】：

在绑定到 $('.linkClass1').click 时 .linkClass1 还不存在，要么在你的 ajax 成功结束时绑定到 this 要么使用

$('body').on('click', '.linkClass1', function

现在在哪里。

【讨论】：

【解决方案3】：

此代码只被调用一次：

$('.linkClass1').click(function() {
    $("#dlg1").dialog("open");
});

这意味着它只会找到 在它被调用时存在的.linkClass1 元素，并且只会将click 处理程序绑定到那些元素。请记住handlers are attached to elements, not to selectors。

所以本质上发生的是这段代码从未将click 处理程序分配给在 AJAX 调用之后添加的元素。

您可以通过将事件处理委托给一个在 DOM 生命周期内不会改变的公共父元素来解决此问题。任何父元素都可以，document 通常是一个可行的默认值。像这样的：

$(document).on('click', '.linkClass1', function() {
    $("#dlg1").dialog("open");
});

这会将点击处理程序分配给document而不是元素，并且假设没有任何东西阻止click将从被点击的元素“冒泡”到每个父元素的事件传播，一直向上到document。该代码中的第二个选择器是一个过滤器，用于仅响应源自匹配元素的click 事件。

【讨论】：

一篇很好的博客文章很好地阐明了这个概念。干得好@大卫。