6

我有一个类似于这样的 HTML：

<div class="ajax_table_container">
    <table>
        <tr>
            <td><a href="ajax.php?action=delete&id=1" class="delete_element">DELETE</a></td>
        </tr>
        <tr>
            <td><a href="ajax.php?action=delete&id=2" class="delete_element">DELETE</a></td>
        </tr>
    </table>
</div>

和 javascript：

$("div.ajax_table_container").on("click", "a.delete_element", function (event) {
    var adr = $(this).attr("href");    
    $(event.delegateTarget).html("TEST");
    return false;
});

在实际应用程序中，我正在从单击的链接中提供的地址重新加载 ajax 请求的内容。

不过，我的问题是，我使用最好的方法来获取主 div （使用 class ajax_table_container）。我说的是片段：event.delegateTarget. 有没有更好的方法在 jQuery 中获取它？（顺便说一句。我不想在$('div.ajax_table_container')这里使用 - 一页上可能有几个这样的 div）

小提琴

编辑：在得到一些答案并检查谷歌后，我想将自己标记为重复；-) 这里：如何使用 jquery.on('click') 获取父选择器，基于单击的元素

4

3 回答 3

9

如果您的目标是获得吸引事件的元素，那么这不仅是您的最佳选择，而且几乎是您唯一的选择。

我不提倡的另一种选择是记住您在事件处理程序关闭的变量中使用的内容：

var $container = $("div.ajax_table_container");
$container.on("click", "a.delete_element", function (event) {
    var adr = $(this).attr("href");    
    $container.html("TEST");
    return false;
});

但是由于 jQuery 为您提供了方便delegateTarget，所以除非有充分的理由使用其他东西，否则我会使用它。将元素引用（相对于选择器）传递到其中的成本$()并不大，很可能您在处理程序中执行的任何其他操作都会消除它增加的任何开销。

于 2013-10-28T12:28:37.760 回答
2

您可以使用.closest()：

$(this).closest("div.ajax_table_container");

这将返回单击链接的父级。

于 2013-10-28T12:30:38.933 回答
0

由于您在此处使用事件委托来注册事件处理程序，因此获取ajax_table_container附加当前调用的 jQuery 事件处理程序的元素的最佳选择是使用event.delegateTarget此处。

于 2013-10-28T12:32:34.163 回答