動態添加元素上的Keypress事件無效

Question

我有一個動態添加的表。 keypress事件不適用於tr和td 。 該事件未被解雇。 但是，如果我使用table或類'.loaded-table'這樣的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以便允許觸發按鍵事件。 在這個例子中，我已經為我想要觸發按鍵事件的所有tds添加了contenteditable="true" 。

 $('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 個解決方案

解決方案1
5 已采納 2017-06-17 16:42:08

解決方案2
2 2017-06-17 16:49:04

動態添加元素上的Keypress事件無效

問題描述

2 個解決方案

解決方案1 5 已采納 2017-06-17 16:42:08

解決方案2 2 2017-06-17 16:49:04

解決方案1
5 已采納 2017-06-17 16:42:08

解決方案2
2 2017-06-17 16:49:04