Question

我有一个动态添加的表。 keypress活动无效tr和td。该事件未被解雇。但如果我使用table或像'.loaded-table'这样的表类，它就会触发。这是我的代码。

$(document).on("keypress", '.loaded-table tr', function (event) {
    var key = event.which;
    if(key === 13){
        event.preventDefault();
        alert();
    }
});

这是动态加载表的HTML代码。

<table contenteditable="true" class="table table-bordered loaded-table">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>father_name</th>
            <th>dob</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Robert</td>
            <td>12-04-1992</td>
        </tr>
    </tbody>
</table>

我不认为我在为事件选择元素时遇到问题。你可能知道的更好。感谢

Answer 1

您需要从表格标记中删除contenteditable="true"并将其添加到tr或td，以便触发按键事件。在这个例子中，我已将contenteditable="true"添加到我想要触发按键事件的所有tds。

$('body').on("keypress", '.loaded-table tr td', function(e) {
    var keyC = e.keyCode;
    if (keyC == 32) {
         alert('Enter pressed');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<table class="table table-bordered loaded-table">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>father_name</th>
            <th>dob</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td contenteditable="true">1</td>
            <td contenteditable="true">John</td>
            <td contenteditable="true">Robert</td>
            <td contenteditable="true">12-04-1992</td>
        </tr>
    </tbody>
</table>
</body>

或者只使用<input>元素

<tr><td><input type="text"></td>....</tr>

Answer 2

这也有效。请注意,之后的.loaded-table。

$(document).on("keypress", '.loaded-table, tr', function(e) {
    var keyC = e.keyCode;
    if (keyC == 32) {
         alert('Enter pressed');
    }
});

动态添加元素上的Keypress事件无效

2 个答案: