2

私はこのjsFiddleを持っています: http://jsfiddle.net/4wyDA/1/

テーブルセルをクリックするとテキストボックスが追加されるようにセットアップしましたが、私が抱えている問題は、テーブルセルをクリックするとテキストボックス内のテキストを編集できないことですe.stopPropagation()。動作しません。

1) 誰かが表のセルをクリックすると、入力/テキストエリアを持つ他のすべてのセルが入力/テキストエリアを削除し、テキストをセルに戻す必要があります (動作)、2) クリックされたセルセルからのテキストを入力/テキストエリアに入力する必要があります（機能します）。最後に、ユーザーはボタンをクリックして入力/テキストエリアのテキストを編集できるはずです (ステップ 1 と 2 を実行し続けると機能しません)。

$(".editable").click(function(e) {
    $(".editable").each(function() {
        if ($(this).has("input")) {
            var v = $(this).children("input.input, textarea").val();
            $(this).text(v);
        }
    });

    var type = $(this).attr("data-type");

    var val = $(this).text();
    if (type === "text" || type === "date") {
        str = '<input type="text" class="input" style="width: 100%;" value="' + val + '" /><br />';
    }
    str += '<input type="button" value="Save" />';
    str += '<input type="button" value="Cancel" />';

    $(this).html(str);
});

$(document).on("click", ".editable input", function(e){
    e.stopPropagation();
});
4

3 に答える 3

4

.editable click代わりに、入力の個別のクリック イベントを削除し、イベント自体でターゲット要素を確認してください。

$(".editable").click(function (e) {
        if (!$(e.target).is('input')) {
           // your code when 
        }
        else {

           // something else
        }
});
于 2013-06-27T17:37:58.683 に答える
0

イベントの先頭に次のコードを追加することで、.editable クラスを持つ要素が入力を削除するのを止めることができます。

$(".editable").click(function(e) {
    if (e.target.className === 'input')
       return;
    //rest of code

デモ

于 2013-06-27T17:41:41.667 に答える
0

提案:クリック イベントをダブルクリックに変更できますか? これで問題は解決します。私は次のようなことを意味します：

それ以外の：

$(".editable").click(function(e) {

使用する：

$(".editable").dblclick(function(e) {

編集可能なテーブルを見るときは、常にダブルクリックを使用します。

デモが変更されました

于 2013-06-27T18:09:27.260 に答える