1

行がクリックされると、その行のテキストボックスとボタンが表示され、そのラベルが非表示になるテーブルがあります。最後の列に、正常に機能するために必要なリンクを追加しましたが、行が「編集」モードになることはありませんが、リンク自体がクリックされた場合に限ります。

行のコードは次のとおりです。

<tr class="viewEditRow rowBorder" style="cursor: pointer;">
    <td class="deleteBranch">
        <input type="checkbox" class="chkDeleteBranch" name="deleteBranches[]" value="1"><br>
        <input type="submit" class="cancelListEditBranch edit hideOnLoad" value="Cancel" title="Cancel editing this branch"><br>
        <input type="submit" class="submitListEditBranch edit hideOnLoad" value="Save" title="Save the changes">
    </td>
    <td class="viewEditBranchName">
        <label class="viewBranchName detailDisplay">Atlanta</label>
        <input type="text" class="edit editBox editName hideOnLoad" value="Atlanta"><br>
        <br>
        <label id="lblBranchesListEditError" class="errorMsg"></label>
    </td>
    <td class="viewEditBranchUrl">
        <label class="viewBranchUrl detailDisplay"><a href="http://whub32.webhostinghub.com/~forsyt11/index.php/coverage-area/georgia" class="branchDetailLink" title="Click to go the branch's web page">georgia</a></label>
        <input type="text" class="edit editBox editUrl hideOnLoad" value="georgia">
    </td>
</tr>

このコードは、その行がクリックされたときにラベルを非表示にし、テキストボックスとボタンを表示します。

$('#tblViewEditAllBranches').on('click', 'tr', function(e) {
    $(this).find('td').each(function() {
        $(this).find('.editBox').val($(this).find('.detailDisplay').text());
    });

    // Hide edit elements in other rows and labels in clicked row
    $('#tblViewEditAllBranches tr').not(this).find('.edit').fadeOut(200);
    $('label', this).fadeOut(200);

    // Show labels in other rows and edit elements in clicked row
    $('#tblViewEditAllBranches tr').not(this).find('label').delay(200).fadeIn(200);
    $('.edit', this).delay(200).fadeIn(200);

    e.stopPropagation();
});

現在起こっていることは、最後の列のリンクがクリックされると、行が「編集」モードになり、ブラウザがクリックされたURLをロードすることです。

リンクが機能するようにする必要がありますが、リンク（およびリンクのみ）をクリックすると、行は編集モードにならず、URLが読み込まれます。

これを達成するために次のコードを試しましたが、最も近いのはreturn falseを使用したときでした。これは、URLに従わなかったため、実際には「近い」わけではありませんでしたが、行は移動しました。編集モードになります。e.preventDefaultとe.stopPropagationはどちらも効果がないようです。

$('#tblViewEditAllBranches tr').find('label.viewBranchUrl').on('click', 'a.branchDetailLink', function(e) {
    e.preventDefault;
});
4

3 に答える 3

3

最も近いクリックされた要素がリンクであるかどうかを確認する条件で関数をラップする必要があります。

このコードを試してください：

$('#tblViewEditAllBranches').on('click', 'tr', function(e) {
    if($(e.target).closest('a.branchDetailLink').length == 0){
        $(this).find('td').each(function() {
            $(this).find('.editBox').val($(this).find('.detailDisplay').text());
        });

        // Hide edit elements in other rows and labels in clicked row
        $('#tblViewEditAllBranches tr').not(this).find('.edit').fadeOut(200);
        $('label', this).fadeOut(200);

        // Show labels in other rows and edit elements in clicked row
        $('#tblViewEditAllBranches tr').not(this).find('label').delay(200).fadeIn(200);
        $('.edit', this).delay(200).fadeIn(200);

        e.stopPropagation();
    }
});

http://jsfiddle.net/78d4z/

于 2013-02-06T09:05:49.453 に答える
0

どちらか

return false;

また

e.stopPropagation();

console.logこれをデバッグするのに役立つかもしれません

event.stopPropagationクリックされたアンカーからイベントがその親 (テーブル行など) にバブリングするのを防ぎます。

于 2013-02-06T02:35:18.733 に答える
0

正しく理解すれば、イベント ハンドラーがどのようにアタッチされているかという問題です。

このようなものは、不要なイベント処理を除外する必要があります:

$('#tblViewEditAllBranches').on('focus', 'label', function(e) {
    // ...
    //your existing code here
    // ...
});

これを少しいじる必要があるかもしれません - それはまさにあなたが望むものに依存します.

たとえば、各行の最後のセルを除くすべてのセルにハンドラーをアタッチできます。

于 2013-02-06T02:41:07.733 に答える