Question

我使用jQuery DataTable，我有一个可编辑的单元格来输入分数。当使用双击此字段时，单元格是可编辑的，我想捕获此事件，以便选择单元格文本，如下所示：

$("td form input").focus(function () {
    concole.log('catched...');
});

或者那样：

$('#dtbGrade td form').focus(function () {
    concole.log('catched...');
});

但是，当用户双击单元格并且单元格被聚焦时，我无法捕捉到该事件。另一方面，单元格的渲染html如下所示（为简洁起见，删除了不必要的行）：

<table id="dtbGrade" role="grid" aria-describedby="dtbGrade_info">      
    <td>
        <form>
            <input autocomplete="off" name="value">
        </form>
    </td>       
</table>

是否有想要捕获此可编辑表格单元格的dbclick事件？

Answer 1

我已经尝试了上面的所有建议，但无论如何都没有完成任何工作。工作代码如下所示。如果需要编辑，欢迎提出意见......非常感谢Syden和Cris。

$('#dtbGrade').dblclick(function () {
    console.log("catched");
    $('#dtbGrade td form input').select();
});

Answer 2

如果动态添加元素，则无法正常工作。也许这样试试：

$('#dtbGrade').on('dblclick', 'td form input', function() {
    console.log('caught')
});

这会将事件绑定到动态添加的元素。

Answer 3

编辑1

@ClintEastwood我无法帮助自己。

所以这与你在下面的内容具有相同的精神，但如果你以后想要在该表中想要更多的行，这会更加健壮和灵活。

＆＃13;

// Provide function scope so we don't pollute the global namespace.
(function($) {
  // Function to handle our double click event.
  var _onRowDblClick = function(evt) {
    // "this" is the table row element we double clicked.
    $(this).find("form input").focus();

    // Stop this from bubbling out.
    evt.stopPropagation();
  }

  // Using jQuery delegate events we have one event for the whole table but 
  // it is still scoped to each row.  Now we can have more than one row and 
  // this will automatically hook to "tr" elements event if they are added 
  // dynamically after initial load.
  $("#dtbGrade").on("dblclick", "tr", _onRowDblClick);
})(window.jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dtbGrade" role="grid" aria-describedby="dtbGrade_info">
  <tr>
    <td>
      <form>
        <input autocomplete="off" name="value">
      </form>
    </td>
    <td>Wanted and Extra Cell to better show example</td>
  </tr>
  <tr>
    <td>
      <form>
        <input autocomplete="off" name="otherValue">
      </form>
    </td>
    <td>We can more than on row now!!!</td>
  </tr>
</table>

＆＃13;

您在原始问题中使用的HTML也不是有效的HTML。你需要一个＆＃34;＆＃34;包裹表格单元格的元素。

<强>原始

下面的原始答案但被误解的问题见上面的新推荐。

~~试试这个：~~

$("table#dtbGrade").on("dblclick", "tr", function(evt) { // Do double click stuff }); $("table#dtbGrade").on("focus", "tr td input", function(evt) { // DO NOT return false, preventDefault, ..etc. You need the event to bubble out // or the dblClick event will not fire // Do Focus stuff. });

我刚刚在JS Fiddle上玩这个，它运行良好。您可能正在做的是＆＃34; evt.preventDefault（）＆＃34;，＆＃34; evt.stopPropagation＆＃34;，或＆＃34;返回false＆＃34;从焦点处理程序，它将阻止双击处理程序被触发，因为它永远不会看到＆＃34;点击＆＃34;在输入元素上。这是您需要点击事件至少向表格行冒泡的极少数时间之一。

如何在可编辑的DataTable单元格上捕获click事件？

3 个答案: