編集可能なDataTableセルでクリックイベントを取得するにはどうすればよいですか？

Question

私はjQuery DataTableを使用しており、スコアを入力するための編集可能なセルがあります。

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

またはそのように：

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

しかし、私はキャッチすることはできません、二重使用は、セルが編集可能であると私は、以下に示すように、セルのテキストを選択することとなるよう、このイ​​ベントをキャッチしたい、このフィールドをクリックすると、ユーザーがセルをダブルクリックしてセルがフォーカスされたイベント。

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

この編集可能な表のセルのdbclickイベントを捕捉するために、任意のアイデア：一方のセルのレンダリングされたHTMLは、（簡潔にするために除去された不要な線）の下に示されているように？

Answer 1

私は上記のすべてのsuggetionsを試しましたが、いずれにしてもそれらのどれも働いていません。作業コードは以下のようになります。編集が必要な場合はコメントが歓迎です...ありがとうたくさんのサイデンとクリス。

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

Answer 2

要素が動的に追加された場合、これは機能しません。おそらく、次のように試してみてください。

これは、動的に追加された要素にもイベントをバインドします。

Answer 3

EDIT 1

@ClintEastwood私は私の自己を助けることができませんでした。

これはあなたの下にあるものと同じ精神ですが、後ほどその表の行を増やしたい場合は、これはもう少し堅牢で柔軟性があります。

// 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);

<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>

また、あなたは、元の質問に持っていたHTMLは有効なHTMLではなかったです。あなたはテーブルセルをラップする要素が必要でした。以下

オリジナル

オリジナルの答えが、誤解の質問は、上記の新しい勧告を参照してください。

これを試してみてください：私はちょうどJSフィドルにこれをいじっし、それがうまく働いた

$("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. 
}); 

。フォーカスハンドラから「evt.preventDefault（）」、「evt.stopPropagation」、または「return false」を実行すると、ダブルクリックハンドラが実行されるのを防ぐことができます。入力要素。これは、少なくとも、テーブル行にバブルアウトするためのクリックイベントが必要なまれな時間の1つです。は