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 回答