3

子要素がjQueryで親クリックイベントをアクティブ化できないという問題があります。私はグーグルを回って、いくつかの異なる解決策に出くわしましたが、どれも私にはうまくいかないようです。

編集したテキストをajax経由で非同期に送信できるように、テーブルセルをクリックしてから編集可能にする必要があります。jQueryを使用してテキストを入力フィールドに置き換えていますが、クリックするたびに親イベントが再度発生するため、編集または送信できません。

私は使用してみました：

$("child").click(function(e){  
  e.stopPropagation();
})

また.unbind("click")、一度クリックすると親でも再度クリックする必要はありませんが、これによって子のバインドも解除されるようです。

問題を適切に示すためにフィドルを用意しました。

どんな助けでも素晴らしいでしょう！それは私を夢中にさせています。

4

3 に答える 3

3

問題は、.btn-comment要素が動的に追加されるため、委任されたハンドラーが必要になることです。これを試して：

$(".td-edit").on('click', '.btn-comment', function(e) {
    e.stopPropagation();
});

更新されたフィドル

フィドルに注意してください-要素alert()をクリックしてもイベントが発生しないため、イベントが伝播されていないことがわかります。button

于 2013-02-07T14:30:17.277 に答える
1

ここでいくつかのこと。

  1. 表のセルをクリックするたびに、フォーム要素が再生成されます。これには、セルをクリックしてコンテンツを編集コントロールに切り替えるだけでなく、テキストフィールドをクリックしてフォーカスし、テキストの変更を実行する場合も含まれます。
  2. コントロールがDOMに存在する前にバインドされるため、ボタンのクリックは決して発火しません。

私の提案は、コントロールがページに既に存在するようにすることですが、要素をクリックしてテキストボックスの VISIBLITY を制御することです。さらに、クリックするテキストをスパン、ラベル、または div に配置し、実際のセルではなく、そのようにクリックします。

$("#td-edit").click(function() {
    $("#td-edit").hide();
    $("#dvEdit").show();
});

$("#btn-comment").click(function(e) {
    $("#td-edit").show();
    $("#dvEdit").hide();
});

更新されたフィドル

于 2013-02-07T14:31:21.847 に答える
0

あなたのフィドルを更新しましたが、私が作成したもので動作するようです。参考までにこちらにも載せておきます：

function clickEdit() {
    $(this).html("<div class=\"input-append\"><input class=\"updater-text span2\" type=\"text\" value=\"" + $(this).text() + "\" /><button class=\"btn-comment\" type=\"button\" id=\"appendedInputButton\">Save</button>").off('click');
    $('#appendedInputButton').on('click', function(e) {
       e.stopPropagation();
       e = $(this);
       console.log(e.prev().val());
       e.parent().html(e.prev().val()).on('click', clickEdit);
    });
}

$(".td-edit").on('click', clickEdit);

フィドル リンク: http://jsfiddle.net/9F67j/14/

于 2013-02-07T14:41:20.450 に答える