Question

当用户点击表格单元格内的内容时，我正在尝试显示弹出窗口（使用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也无济于事。

如果有人可以提供帮助，谢谢。

Answer 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");
            });
        },
     });
});

Answer 2

在绑定到$（'。linkClass1'）时。单击.linkClass1尚不存在，在ajax成功结束时绑定到此或使用

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

现在的位置。

Answer 3

此代码仅被调用过一次：

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

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

所以本质上发生的是这段代码永远不会为AJAX调用后添加的元素分配click处理程序。

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

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

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

使用jquery UI的dialog（）函数和ajax调用

3 个答案:

长答案

简答