Question

我正在使用ie 11。我在表中添加一行。我正在使用模态弹出窗口输入数据，我正在进行AJAX调用以更新基础数据。完成后，我使用JQuery将行添加到表中。这一切都很好，除了一件事。 tablerow的末尾包含一个按钮。桌面上的所有其他按钮都可以工作，但新按钮却没有。当我查看开发人员工具时，新行的按钮与其他行的标记具有相同的标记，因此它应该以相同的方式工作。所以表格看起来如此;

        <table class="GridTbl" id="surveyList">
            <thead>
                <tr>
                    <th>Survey</th>
                    <th>Contract</th>
                    <th>Select</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var contract in
                    SessionObjectsMSurvey.ContractList.Where(x => x.SurveyId > 0)
                                        .OrderByDescending(x => x.SurveyCreated))
                {
                    <tr>
                        <td>@contract.SurveyTitle</td>
                        <td>@contract.ContractTitle</td>
                        <td>
                            <button class="btn btn-xs btn-primary selectContract"
                                    data-msurvey-row-id="@contract.RowId">
                                Select
                            </button>
                        </td>
                    </tr>
                }
            </tbody>
        </table>

我在这里添加了一行数据。请注意，该按钮具有一类selectContract。这工作

var addRowToTable = function (data) {
    var row =
    '<tr>' +
        '<td>{{surveyTitle}}</td>' +
        '<td>{{contractTitle}}</td>' +
        '<td>' +
        '<button class="btn btn-xs btn-primary selectContract" data-msurvey-row-id="{{rowId}}">Select</button>' +
        '</td>' +
    '</tr>';


    //Add row
    $('#surveyList').prepend(row.compose({
        'surveyTitle': data.SurveyTitle,
        'contractTitle': data.ContractTitle,
        'rowId': data.RowId
    }));
};

这是点击事件，通常可以使用但不适用于新行。新行上的按钮会触发一个事件，我不知道事件处理程序在哪里，它应该是这个，但它不是;

$(".selectContract").on("click", function (e) {
    e.preventDefault();
    var $this = $(this);
    var rowId = $this.data("msurvey-row-id");
    var url = GetHiddenField("msurvey-get-contract-and-survey-url");
    dataService.getContractAndSurvey(rowId, displayContractInfo, url);
});

Answer 1

只是补充一些说明。您在评论中说您已经使用on()进行事件委派：

$(".selectContract").on("click", function (e) {

但这到底发生了什么？您确实在使用on()，但仅在运行该代码块时存在的选择器（=直接事件绑定）。或者另外说：你必须在一致的父类上绑定on方法，例如：

$('#surveyList').on("click", ".selectContract", function (e) {

只要动态创建=事件委派，这将适用于类#surveyList的{{1}}内的所有元素。

深入了解此Event binding on dynamically created elements?

".selectContract"并不一定意味着事件委派。您也可以将其与On()结合使用。

点击事件未触发

1 个答案: