Question

这一定是一个简单的问题，但我无法弄清楚到底是什么。如果在表格中我显示一行是静态的（硬编码），然后点击它，它会显示模态弹出窗口。但是在这行的正下方 - 通过JQuery Ajax动态填充，具有相同的类属性，它不起作用。我不知道为什么。

这是我的表：

   <table class="tblContacts table toggle-circle" data-filter="#searchFilter" data-limit-navigation="5"
            data-filter-minimum="1">
            <thead>
                <tr>
                    <th data-class="expand" data-toggle="true" data-sort-initial="true">
                        Name
                    </th>
                    <th>
                        Title
                    </th>
                    <th data-hide="phone">
                        Office
                    </th>
                    <th data-hide="phone">
                        Cell
                    </th>
                    <th data-hide="phone">
                        Email
                    </th>
                    <%--<th data-ignore="true" data-hide="all">--%>
                    <th data-ignore="true" data-hide="phone">
                        ID
                    </th>
                </tr>
            </thead>
            <tbody>
                                       <tr class="md-trigger pointer-hand" data-modal="modalContactPopup">
                        <td width="1" style="display: none !important">
                            <%#Eval("usersID")%>
                        </td>
                        <td data-sort-initial="true">
                            <%#Eval("usersFirstName")%>&nbsp;<%#Eval("usersLastName")%></td>
                        <td>
                            <%#Eval("usersTitle")%>
                        </td>
                        <td data-type="numeric">
                            <%#Eval("usersPhoneWork")%>
                        </td>
                        <td data-type="numeric">
                            <%#Eval("usersPhoneCell")%>
                        </td>
                        <td style="text-align: center;">
                            <% //todo: Check if email exists first before formating like it is below... %>
                            <a href="mailto:<%#Eval("usersEmail1")%>" title="Click to email <%#Eval("usersEmail1")%>">
                                <i class="icon-envelope"></i>
                            </a>
                        </td>
                    </tr>

工作正常，当我点击它时，它会使用此代码data-modal="modalContactPopup"

向我显示数据模式

但是，如果我使用此代码动态填充我的表：

   function PopulateData() {


        var footable = $('table').data('footable');

        $.ajax({
            type: "POST",
            url: "contactsc2.aspx/getAllUsers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var parsed = $.parseJSON(data.d);
                var newRow = "";
                $.each(parsed, function (i, jsondata) {
                    newRow += "<tr class='md-trigger pointer-hand' data-modal='modalContactPopup'><td>" + jsondata.usersFirstName + " " + jsondata.usersLastName + "</td><td>" + jsondata.usersTitle + "</td><td>" + jsondata.usersPhoneWork + "</td><td>" + jsondata.usersPhoneCell + "</td><td>" + jsondata.usersEmail1 + "</td><td>" + jsondata.usersID + "</td></tr>";

                });
                footable.appendRow(newRow);
            }
        });
    }

弹出窗口无法打开。请注意，当我动态创建这些行时，我已经包含了data-modal ='modalContactPopup'。它应该工作。
我检查了页面源代码，静态行和源代码上的动态行没有区别，但即便如此，如果我点击静态，它会显示弹出窗口，而不是其他行。

有人能想出原因吗？

由于

Answer 1

这可能是因为您在加载页面时向特定元素添加了点击处理程序（将来添加的所选类的元素将没有绑定的点击处理程序）：$('.yourElementsClassName').click(function(){});

要处理将来添加的元素上的click事件，请使用delegate方法，该方法根据特定的根元素集选择现在或将来与选择器匹配的所有元素。

$('body').delegate('.yourElementsClassName', 'click', function(evt){});

Answer 2

如果您使用旧版本的jquery，可以使用.on() api动态绑定事件或使用.live()。

jQuery动态填充行

2 个答案: