当前位置：文江博客话题详情

动态 jquery 监听器

发布于 2024-11-16 07:16:39 字数 165 浏览 0 评论 0原文

如何使用 jquery 创建动态侦听器来运行不同的 ajax 任务？

例如，stackoverflow 对于每个没有 onlick 的评论都有一个删除链接，所以我猜测他们创建了一个类侦听器，但是它如何知道要使用哪个 id在ajax url 中使用？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼泪淡了忧伤 2024-11-23 07:16:39

您的 HTML 可以包含类似以下内容：

<span class="delete-link" data-id="15">Delete comment 15</span>

然后，使用 jQuery，您可以在该类上添加回调：

$('.delete-link').click(function() {
    var comment_id = $(this).data('id');
    /* send ajax request for that comment ID */
});

Your HTML could contain something like:

<span class="delete-link" data-id="15">Delete comment 15</span>

Then, with jQuery, you could add callbacks on that class:

$('.delete-link').click(function() {
    var comment_id = $(this).data('id');
    /* send ajax request for that comment ID */
});

回复收藏 0 原文

柠檬色的秋千 2024-11-23 07:16:39

我相信这是由注释的 tr 祖先上的 id 属性完成的。

HTML 看起来像这样：

<tr id="comment-7507745" class="comment">
    <td class="comment-actions">
        <table>
        <tbody>
        <tr>
            <td class="comment-score">
                <span> </span>
            </td>
            <td>
                <a class="comment-up comment-up-off" title="this is a great comment">upvote</a>
            </td>
        </tr>
            <!-- and a whole bunch more -->
    </td>
</tr>

所以代码的实现可能有点像这样：

$(document).delegate('a.comment-up', 'click', function(event) {
    var commentId = $(this).closest('tr.comment').attr('id').substr(8);

    // do something with the comment id
});

所以数据被存储为属性，并且 DOM 遍历用于查找存储数据的相关元素。

I believe this is done by the id property on the tr ancestor of the comment.

The HTML looks something like this:

<tr id="comment-7507745" class="comment">
    <td class="comment-actions">
        <table>
        <tbody>
        <tr>
            <td class="comment-score">
                <span> </span>
            </td>
            <td>
                <a class="comment-up comment-up-off" title="this is a great comment">upvote</a>
            </td>
        </tr>
            <!-- and a whole bunch more -->
    </td>
</tr>

So the code might be implemented with code a bit like this:

$(document).delegate('a.comment-up', 'click', function(event) {
    var commentId = $(this).closest('tr.comment').attr('id').substr(8);

    // do something with the comment id
});

So the data is stored as an attribute, and DOM traversal is used to find the relevant element where the data is stored.

回复收藏 0 原文

层林尽染 2024-11-23 07:16:39

使用绑定方法

$('a', '#container').bind('click',function(e){
    /* stuff */
});

（和取消绑定，用于删除）

或者如果您异步附加新链接，您可以使用 live 函数

$('a', '#container').live('click',function(e){
    /* stuff */
});

（与 live 相反，是 die( event ) ）

单击链接，#container 的子级将调用匿名函数在 bind/live 的参数中，您可以通过检查其索引、类或任何内容来检查单击了哪个链接 - 并运行不同的代码。

with the bind method

$('a', '#container').bind('click',function(e){
    /* stuff */
});

(and unbind, for removing)

Or if you are asynchronously appending new links you can use the live function

$('a', '#container').live('click',function(e){
    /* stuff */
});

(opposite of live, is die( event ) )

Clicking on a link, child of #container will call the anonymous function within the arguments of bind/live, You can then check which link was clicked by checking for its index, or class, or anything - and run different code.

回复收藏 0 原文

~没有更多了~