javascript - 通过 jQuery 附加的 HTML 不会接受点击事件-6ren

javascript - 通过 jQuery 附加的 HTML 不会接受点击事件

转载作者：行者123 更新时间：2023-11-30 12:49:48

最近几天这种行为已经阻止了我。我安装了 waypoint jQuery 插件，当到达页面底部时它会加载更多评论。加载的 HTML 包括一些带有类的按钮，这些按钮也必须通过 通过 jQuery 在点击时触发。这是行不通的。

所以这个场景很好地总结了它:

加载文档的评论的喜欢、不喜欢和删除按钮正常工作
用户到达页面底部，jQuery 通过 AJAX 调用将更多评论加载到页面
来自 AJAX 评论的喜欢、不喜欢和删除不会触发事件。

为什么？我不明白。他们有正确的类(class)和一切。

HTML:

<div class="comments">
    <div id="new-comment"></div>

    <script>var commenters = [{{ S_IMAGE_COMMENTERS }}];</script>

    {% for comment in S_IMAGE_COMMENTS %}
        <div id="cid-{{ comment.comment_id }}" class="comments-area row{% if loop.last %} last-comment{% endif %}">
            <div class="user-info col-lg-2 col-md-2 col-sm-2 right">
                <img src="{{ comment.user_avatar }}" height="75px" alt="Avatar" class="comment-avatar valign-top img-circle cream-thick-border" />
            </div>
            <div class="col-lg-1 col-md-1 col-sm-1" style="width: 2%;"></div>
            <div class="comment-rag col-lg-9 col-md-9 col-sm-9 left" style="padding: 0;">
                <div class="comment-content row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 break">
                        <span class="small comment-stats">
                            Posted by <strong><a href="{{ S_WEB_PATH }}user/{{ comment.username }}">{{ comment.username }}</a></strong> about {{ comment.comment_time }}
                            <span class="grey">
                                &nbsp;/&nbsp;<span class="clikesCount">{{ comment.comment_likes }}</span> likes
                                &nbsp;&bull;&nbsp;<span class="cdislikesCount">{{ comment.comment_dislikes }}</span> dislikes
                            </span>
                        </span>
                        <span class="pipe-hide">&nbsp;|&nbsp;</span>
                        <span class="comment-options">
                            <button value="{{ S_IMAGE_NAME }}?do=comment{% if comment.comment_id == comment.liked_cid and comment.like_type != '' and comment.like_type == 'like' %}un{% endif %}like" class="likeUnlike"><span class="comment-option glyphicon glyphicon-thumbs-up"{% if comment.comment_id == comment.liked_cid and comment.like_type != '' and comment.like_type == 'like' %} style="color: #aa4e4e;"{% endif %} title="{% if comment.comment_id == comment.liked_cid and comment.like_type != '' and comment.like_type == 'like' %}Unlike{% else %}Like{% endif %}"></span></button>

                            <button value="{{ S_IMAGE_NAME }}?do={% if comment.comment_id == comment.liked_cid and comment.like_type != '' and comment.like_type == 'dislike' %}remove_{% endif %}commentdislike" class="dislikeUnlike"><span class="comment-option glyphicon glyphicon-thumbs-down"{% if comment.comment_id == comment.liked_cid and comment.like_type != '' and comment.like_type == 'dislike' %} style="color: #aa4e4e;"{% endif %} title="{% if comment.comment_id == comment.liked_cid and comment.like_type != '' and comment.like_type == 'dislike' %}Remove Dislike{% else %}Dislike{% endif %}"></span></button>
                            {% if comment.commenter_id != S_USER_ID %}<button><span class="comment-option glyphicon glyphicon-minus-sign" title="Report"></span></button>{% endif %}

                            {% if comment.commenter_id == S_USER_ID %}<button value="{{ S_IMAGE_NAME }}?do=delete_comment" class="deleteComment comment-option close" title="Delete">&times;</button>{% endif %}

                        </span>

                        <span class="comment-content-main break">{{ comment.comment_content }}</span>
                    </div>
                </div>
            </div>
        </div>
        <hr{% if loop.last %} style="display: none"{% endif %} class="line-{{ comment.comment_id }}" />
    {% else %}
        <div class="row noComments">
            <br />
            <div class="col-lg-12 center">
                <h3><span>There are no comments for this image.</span></h3>
            </div>
        </div>
    {% endfor %}
</div><!-- .comments -->

jQuery(负责加载更多评论):

    // Load more comments when bottom's reached
    var $loading    = $('<div class="loading row" style="display: none;"><div class="col-lg-12 center">' + generate_preloader(32, 3) + '</div></div>');
    var $footer     = $('.last-comment');
    var $docURL     = document.URL;
    var $imageName  = $docURL.substring(-5);
    var $start      = { from: 10 };
    var opts        = { offset: '100%' };

    //alert($imageName);

    $footer.waypoint(function(event, direction) {

        var $commentCount = document.getElementsByClassName('comments-area');

        if ($commentCount.length < 10)
        {
            return; 
        }

        $footer.waypoint('destroy');
        $('.loadMore').append($loading);
        $('.loading').fadeIn('slow');

        delay('comments', function(){
            $.ajax({
                type: 'GET',
                url: $imageName + '?do=fetchMoreComments&start=' + $start.from,
                success: function(data){

                    // console.log(data); return;
                    var response = $.parseJSON(data);

                    if ('error' in response)
                    {
                        $loading.fadeOut('fast');
                        return;
                    }

                    $start.from += 10;
                    $loading.detach();
                    $footer.waypoint(opts);

                    // Remove previous last class
                    $('.comments-area').removeClass('last-comment');

                    var commentsLength = response.comments.length - 1;

                    for (var key in response.comments) 
                    {
                        var comment = response.comments[key];

                        var commentHTML = ((key == 0) ? '<hr />' : '') + '<div id="cid-' + comment.comment_id + '" class="comments-area row' + ((commentsLength == key) ? ' last-comment' : '') + '" style="display: none;">';
                        commentHTML += '<div class="user-info col-lg-2 col-md-2 col-sm-2 right">';
                        commentHTML += '<img src="' + comment.user_avatar + '" height="75px" alt="Avatar" class="comment-avatar valign-top img-circle cream-thick-border" />';
                        commentHTML += '</div>';
                        commentHTML += '<div class="col-lg-1 col-md-1 col-sm-1" style="width: 2%;"></div>';
                        commentHTML += '<div class="comment-rag col-lg-9 col-md-9 col-sm-9 left" style="padding: 0;">';
                        commentHTML += '<div class="comment-content row">';
                        commentHTML += '<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 break">';
                        commentHTML += '<span class="small comment-stats">';
                        commentHTML += 'Posted by <strong><a href="' + generate_site_url() + 'user/' + comment.username + '">' + comment.username + '</a></strong>';
                        commentHTML += '<span class="grey">';
                        commentHTML += '&nbsp;/&nbsp;<span class="clikesCount">' + comment.comment_likes + '</span> likes';
                        commentHTML += '&nbsp;&bull;&nbsp;<span class="cdislikesCount">' + comment.comment_dislikes + '</span> dislikes';
                        commentHTML += '&nbsp;/&nbsp;' + comment.comment_time;
                        commentHTML += '</span>';
                        commentHTML += '</span>';
                        commentHTML += '<span class="pipe-hide">&nbsp;|&nbsp;</span>';
                        commentHTML += '<span class="comment-options">';

                        commentHTML += '<button value="' + $imageName + '?do=comment' + ((comment.comment_id == comment.liked_cid && comment.like_type != '' && comment.like_type == 'like') ? 'un' : '') + 'like" class="likeUnlike"><span class="comment-option glyphicon glyphicon-thumbs-up"' + ((comment.comment_id == comment.liked_cid && comment.like_type != '' && comment.like_type == 'like') ? ' style="color: #aa4e4e;"' : '') + ' title data-original-title="' + ((comment.comment_id == comment.liked_cid && comment.like_type != '' && comment.like_type == 'like') ? 'Unlike' : 'Like') + '"></span></button>';

                        commentHTML += '<button value="' + $imageName + '?do=' + ((comment.comment_id == comment.liked_cid && comment.like_type != '' && comment.like_type == 'dislike') ? 'remove_' : '') + 'commentdislike" class="dislikeUnlike"><span class="comment-option glyphicon glyphicon-thumbs-down"' + ((comment.comment_id == comment.liked_cid && comment.like_type != '' && comment.like_type == 'dislike') ? ' style="color: #aa4e4e;"' : '') + ' title data-original-title="' + ((comment.comment_id == comment.liked_cid && comment.like_type != '' && comment.like_type == 'dislike') ? 'Remove Dislike' : 'Dislike') + '"></span></button>';

                        // commentHTML += '<span class="comment-option glyphicon glyphicon-thumbs-down"></span>';
                        commentHTML += (comment.username != $('.user-username').text()) ? '<button><span class="comment-option glyphicon glyphicon-minus-sign" title="Report"></span></button>' : '';
                        commentHTML += (comment.username == $('.user-username').text()) ? '<button class="comment-option close" title="Delete">&times;</button>' : '';
                        commentHTML += '</span>';
                        commentHTML += '<span class="comment-content-main break">' + comment.comment_content + '</span>';
                        commentHTML += '</div>';
                        commentHTML += '</div>';
                        commentHTML += '</div>';
                        commentHTML += '</div>';
                        commentHTML += '<hr' + ((commentsLength == key) ? ' style="display:none"' : '') + ' />';

                        $('.comments').append($(commentHTML));
                        $('.comments-area').slideDown('fast');
                    }
                }
            });
        }, average_ajax_delay);

    }, opts);

触发喜欢、不喜欢和删除按钮的jQuery:

// Comment like, dislike, unlike and remove dislike
    $('.likeUnlike').click(function(e){

        e.preventDefault();

        var likeHref  = $(this).val();
        var commentID = $(this).parent().parent().parent().parent().parent().attr('id').substring(4);

        var likeUnlike   = (likeHref.indexOf('commentunlike') != -1) ? 'commentunlike' : 'commentlike';
        var oppositePreg = (likeUnlike == 'commentlike') ? 'commentunlike' : 'commentlike';

        var likeStr =  (likeUnlike == 'commentlike') ? 'Unlike' : 'Like';

        var likeUnlikeUrl   = likeHref.replace(/comment(un)?like/g, oppositePreg);
        var thumbColor      = (likeUnlike == 'commentlike') ? '#aa4e4e' : '#A2A2A2';

        $(this).val(likeUnlikeUrl);
        $('#cid-' + commentID + ' .glyphicon-thumbs-up').attr('data-original-title', ucfirst(likeStr));
        $('#cid-' + commentID + ' .comment-options .tooltip-inner').text(ucfirst(likeStr));
        $('#cid-' + commentID + ' .comment-options .glyphicon-thumbs-up').css('color', thumbColor);

        // Check if dislike is clicked
        dislikeButton = $('#cid-' + commentID + ' .dislikeUnlike');
        if (dislikeButton.val().indexOf('remove_commentdislike') != -1)
        {
            dislikeButton.val(dislikeButton.val().replace(/(remove_)?commentdislike/g, 'commentdislike'))
            dislikeButton.children().attr('data-original-title', 'Dislike');
            dislikeButton.children().css('color', '#A2A2A2');
        }

        $.ajax({
            type: 'POST',
            url: likeHref,
            data: { commentID: commentID },
            success: function(data){

                // console.log(data); return;
                var response = $.parseJSON(data);

                if ('error' in response)
                {
                    display_alert(response.error, 'danger', 3000, 'top');   
                    // return;
                }

                $('#cid-' + commentID + ' .small.comment-stats .grey .clikesCount').replaceWith(response.clikeCount);
                $('#cid-' + commentID + ' .small.comment-stats .grey .cdislikesCount').replaceWith(response.cdislikeCount);
            }
        });

        return false;
    });

    $('.dislikeUnlike').click(function(e){

        e.preventDefault();

        var dislikeHref = $(this).val();
        var commentID   = $(this).parent().parent().parent().parent().parent().attr('id').substring(4);

        var dislikeUnlike   = (dislikeHref.indexOf('remove_commentdislike') != -1) ? 'remove_commentdislike' : 'commentdislike';
        var oppositePreg    = (dislikeUnlike == 'commentdislike') ? 'remove_commentdislike' : 'commentdislike';

        var dislikeStr  =  (dislikeUnlike == 'commentdislike') ? 'Remove Dislike' : 'Dislike';

        var dislikeUnlikeUrl    = dislikeHref.replace(/(remove_)?commentdislike/g, oppositePreg);
        var thumbColor          = (dislikeUnlike == 'commentdislike') ? '#aa4e4e' : '#A2A2A2';

        $(this).val(dislikeUnlikeUrl);
        $('#cid-' + commentID + ' .glyphicon-thumbs-down').attr('data-original-title', ucfirst(dislikeStr));
        $('#cid-' + commentID + ' .comment-options .tooltip-inner').text(ucfirst(dislikeStr));
        $('#cid-' + commentID + ' .comment-options .glyphicon-thumbs-down').css('color', thumbColor);

        // Check if dislike is clicked
        likeButton = $('#cid-' + commentID + ' .likeUnlike');
        if (likeButton.val().indexOf('unlike') != -1)
        {
            likeButton.val(likeButton.val().replace(/comment(un)?like/g, 'commentlike'))
            likeButton.children().attr('data-original-title', 'Like');
            likeButton.children().css('color', '#A2A2A2');
        }

        $.ajax({
            type: 'POST',
            url: dislikeHref,
            data: { commentID: commentID },
            success: function(data){

                // console.log(data); return;
                var response = $.parseJSON(data);

                if ('error' in response)
                {
                    display_alert(response.error, 'danger', 3000, 'top');   
                    // return;
                }

                $('#cid-' + commentID + ' .small.comment-stats .grey .clikesCount').replaceWith(response.clikeCount);
                $('#cid-' + commentID + ' .small.comment-stats .grey .cdislikesCount').replaceWith(response.cdislikeCount);
            }
        });

        return false;
    });

    $('.deleteComment').click(function(e){

        e.preventDefault();

        var deleteHref = $(this).val();
        var commentID  = $(this).parent().parent().parent().parent().parent().attr('id').substring(4);

        $.ajax({
            type: 'POST',
            url: deleteHref,
            data: { commentID: commentID },
            success: function(data){

                // console.log(data); return;
                var response = $.parseJSON(data);

                if ('error' in response)
                {
                    display_alert(response.error, 'danger', 3000, 'top');   
                    return;
                }

                $('#cid-' + commentID).slideUp('fast');
                $('.line-' + commentID).slideUp('fast');
            }
        });

        return false;
    });

因此，如前所述，随文档加载的 HTML(当页面首次加载时)具有正常工作的喜欢、不喜欢和删除按钮。但是，当新评论来自 AJAX 时，这些按钮不起作用。

如何解决这个问题？

最佳答案

您需要使用事件委托(delegate)来使用 on() 绑定(bind)事件用于将事件绑定(bind)到动态添加的元素，这些元素在执行 event 绑定(bind)代码时不存在。您可以将事件委托(delegate)给动态添加元素的 static 父级或文档。

$(document).on('click', '.deleteComment', function(e){

});

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, Reference.

关于javascript - 通过 jQuery 附加的 HTML 不会接受点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21335737/

文章推荐： c# - 我如何将验证属性应用于 WPF

文章推荐： c# - 将鼠标点击发送到另一个应用程序的 X Y 坐标

文章推荐： ios - iOS 9 中的状态栏隐藏问题

文章推荐： javascript - 仅更改文本的不透明度

QTCreator 的集成表单编辑器不会加载自定义小部件插件(Designer 会)
尝试使用集成到 QTCreator 的表单编辑器，但即使我将插件放入 QtCreator.app/Contents/MacOS/designer 也不会显示。不过，相同的 dylib 文件确实适用于独
java - 会 this.method2();跳过返回值？
在此代码示例中。 “this.method2();”之后会读到什么？在返回returnedValue之前会跳转到method2()吗？ public int method1(int returnedV
java - Gradle 不会解析依赖关系(Maven 会)
我的项目有通过gradle配置的依赖项。我想添加以下依赖项: compile group: 'org.restlet.jse', name: 'org.restlet.ext.apispark', v
polymer - polymer 会 build 更多现成可用的组件吗？
我将把我们基于 Windows 的客户管理软件移植到基于 Web 的软件。我发现 polymer 可能是一种选择。但是，对于我们的使用，我们找不到 polymer 组件具有表格 View 、下拉菜单
java - 从项目文件夹中读取文件，eclipse 会，但终端不会
我的项目文件夹 Project 中有一个文件夹，比如 ED 文件夹，当我在 Eclipse 中指定在哪里查找我写入的文件时 File file = new File("ED/text.txt"); e
javascript - jQuery 动画背景位置不会改变但 css 会
这是奇怪的事情，这个有效: $('#box').css({"backgroundPosition": "0px 250px"}); 但这不起作用，它只是不改变位置: $('#box').animate
javascript - 为什么按位运算符 OR 会 chop 此示例中的值？
这个问题在这里已经有了答案: Why does OR 0 round numbers in Javascript? (3 个答案) 关闭 5 年前。 Mozilla JavaScript Guide
c - strcmpi 代码不会编译但 strcmp 会？
这个问题在这里已经有了答案: Is the function strcmpi in the C standard libary of ISO? (3 个答案) 关闭 8 年前。我有一个问题，为什么
mysql - MySQL 会/是否支持 DATETIMEOFFSET？
我目前使用的是共享主机方案，我不确定它使用的是哪个版本的 MySQL，但它似乎不支持 DATETIMEOFFSET 类型。是否存在支持 DATETIMEOFFSET 的 MySQL 版本？或者有计划
java - CDI 会(或应该)提供包限定符吗？
研究 Seam 3，我发现 Seam Solder 允许将 @Named 注释应用于包 - 在这种情况下，该包中的所有 bean 都将自动命名，就好像它们符合条件一样@Named 他们自己。我没有看到
arrays - `removeLast` 会 swift 减少数组的容量吗？
我知道 .append 偶尔会增加数组的容量并形成数组的新副本，但 .removeLast 会逆转这种情况并减少容量通过复制到一个新的更小的数组来改变数组？最佳答案否(或者至少如果是，则它是一个错
ruby - Ruby 会*快*吗？
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
c++ - noexcept 会 boost 性能吗？
noexcept 函数说明符是否旨在 boost 性能，因为生成的对象中可能没有记录异常的代码，因此应尽可能将其添加到函数声明和定义中？我首先想到了可调用对象的包装器，其中 noexcept 可能会产
Angularjs Promise.all 不会更新范围，而 $q.all 会
我正在使用 Angularjs 1.3.7，刚刚发现 Promise.all 在成功响应后不会更新 angularjs View ，而 $q.all 会。由于 Promises 包含在 native
javascript - 为什么移动 0 会 chop 小数？
我最近发现了这段JavaScript代码: Math.random() * 0x1000000 10.12345 10.12345 >> 0 10 > 10.12345 >>> 0 10 我使用
haskell - 为什么 Haskell 会(显然)不一致地推断出特定类型？
我正在编写一个玩具(物理)矢量库，并且遇到了 GHC 坚持认为函数应该具有 Integer 的问题。是他们的类型。我希望向量乘以向量以及标量(仅使用 * )，虽然这可以通过仅使用 Vector 来实现
email - Swiftmailer 不会发送邮件，但是 mail() 会
PHP 的 mail() 函数发送邮件正常，但 Swiftmailer 的 Swift_MailTransport 不起作用! 这有效: mail('user@example.com', 'test
PHP 脚本不会转储 SQL 但 phpMyAdmin 会
我尝试通过 php 脚本转储我的数据，但没有命令行。所以我用 this script 创建了我的 .sql 文件然后我尝试使用我的脚本: $link = mysql_connect($host, $u
python sqlite3 不会执行连接，但单独的 sqlite3 会
使用 python 2.6.4 中的 sqlite3 标准库，以下查询在 sqlite3 命令行上运行良好: select segmentid, node_t, start, number,title
javascript - 为什么移动 0 会 chop 小数？
我最近发现了这段JavaScript代码: Math.random() * 0x1000000 10.12345 10.12345 >> 0 10 > 10.12345 >>> 0 10 我使用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 通过 jQuery 附加的 HTML 不会接受点击事件