0

私は、実際のプロジェクトページから、問題を実証するのに十分なだけのテストページを設定しました。これがリンクです。

私が何を意味するかを確認するには、リンクに移動して、一番上のテーブルの行をクリックすると、その行のテキストボックスとラベルが交互に表示されるようになります。[キャンセル]ボタンをクリックすると、両方の行にラベルが表示されることに注意してください。

下のテーブルは、その行をクリックすると同じように動作します。しかし、下の表の[キャンセル]ボタンをクリックすると、問題は醜い頭に浮かびます。その行のテキストボックスを非表示にするだけでなく、ページが実際に更新されます。

私はこれに何時間も費やしました、そして私は私の人生のために何が起こっているのか、そしてそれを修正する方法を理解することができません。

誰かがこれを見て、何が起こっているのかを理解するのを手伝ってくれたら本当にありがたいです。

4

2 に答える 2

2

stopPropogationケースセンシティブです。2番目のイベントハンドラーは間違った大文字小文字を使用しています（大文字のSで始まります）。

// Prevent bubbling of click events in #tblBranchCoverage
$('#tblBranchCoverage').on('click', ':input', function (e) {
    e.stopPropagation();
});

// Prevent bubbling of click events in #tblViewEditAllBranches
$('#tblViewEditAllBranches').on('click', ':input', function (e) {
    e.StopPropagation();
});

ただし、niaharが指摘しているように、2番目のテーブルはフォーム内にあり、e.stopPropagation十分ではありません。両方のイベントハンドラーを修正して、代わりに単にfalseを返すようにすることができます。との違いを読んでみる価値はあるでしょう。この場合は。e.stopPropogation()e.preventDefault()return false

[保存]をクリックしたときに更新にajaxを使用するアプローチを検討している場合は、入力ボタンの代わりに基本ボタンを使用するだけで、フォームの送信をキャンセルする必要はありません。

<button type="button">Save</button>

ビットが重要であることに注意してください。type="button"そうでない場合、入力ボタンのように動作し、フォームを送信します。

于 2013-02-01T02:07:24.230 に答える
1

うまく機能したかどうかはわかりませんが、jsfiddleでSpencerooniのコードを試しましたが、役に立ちません。

ただし、jsの最後のビットをこれに置き換えると、問題ないはずです。

$('tr input.cancelListEditBranch').click(function(e) {
    // Show the labels and hide the edit elements
    $(this).closest("tr").find('.edit').fadeOut(200);
    $(this).closest("tr").find('.detailDisplay').delay(200).fadeIn(200);
    return false;
});

これが別のjsfiddleです。

2番目のケースではなく、最初のケースで機能する理由は、2番目のテーブルがformタグでラップされているため、送信ボタンは、イベントが伝播するのを待たずに、クリックされるとすぐに自動的POSTに実行されます。したがって、フォームの送信をキャンセルする場合は、イベントを最初の段階でキャプチャする必要があります（イベントがまでに伝播されたときではありませんtable）。

于 2013-02-01T02:18:11.423 に答える