jquery - 如何防止 .on ('click' ) 函数用于表行中的链接

Question

我有一个表格，当单击一行时，该行的文本框和按钮会显示，而其标签会隐藏。我现在在最后一列中添加了一个链接，我需要它正常运行，但不会导致该行进入“编辑”模式，但只有在单击链接本身时才会进入“编辑”模式。

这是一行的代码:

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

当前发生的情况是，当单击最后一列中的链接时，该行将进入“编辑”模式并且浏览器会加载所单击的网址。

我需要允许链接工作，但是当单击链接(并且仅链接)时，该行不会进入编辑模式，但是加载网址。

我已经尝试了以下代码来尝试实现此目的，但我得到的最接近的是当我使用 return false 时，这根本不是真正的“关闭”，因为它没有遵循 url，而是行确实进入了编辑模式。 e.preventDefault 和 e.stopPropagation 似乎都没有任何效果。

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

Answer 1

您应该将函数包装在一个条件中，检查最近单击的元素是否是链接。

试试这个代码:

$('#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/