Question

所以我有一些结果，包括切换，隐藏/显示等项目。除了附加到结果底部的项目之外，该位工作正常。点击处理程序不会触发它们，但在其他处理程序上工作正常。我假设它与页面加载时读取节点有关。如何使附加项目也起作用？

<div class="event">
                            <a href="/profile/00000000">
                            <img class="user-image" src="https://graph.facebook.com/00000000/picture?width=100&amp;height=100">
                            </a>
                            <div class="event-info">
                                <div class="content">
                                    <div class="event-time-location">
                                    <span class="user-name">Levi Thornton</span>
                                    <span class="user-action-time">Posted 21 minutes ago</span>
                                    </div>
                                        <div class="event-caption">1
</div>                                                                      </div>
                                <div class="event-like-comment">
                                    <input id="js-eventId" type="hidden" value="201" name="eventId">
                                                                        <a href="#" class="event-liked hidden">liked</a><a href="#" class="event-like">like</a>                                 <a href="#" class="js-event-comment">comment</a>
                                    <a href="/shindig/201" class="event-view">more</a>
                                </div>

                            </div>


                            <div class="comments" id="comments-201" style="display: block;">
                        <div class="newComments">
                                <input id="js-eventId" type="hidden" value="201" name="eventId">
                                <textarea class="addComment" value="Write a comment..." placeholder="Write a comment..." title="Write a comment..."></textarea>
                            </div>
                                                    </div>
                        <!-- comments -->


                            <div class="clear"></div>
                        </div>

jQ：

...
     // add like
     $(".event-like").click(function(event){
         event.preventDefault();
                var likeBtn = $(this);
                $.post('/shindig/ajax-like-event', { eventId: $(this).siblings('#js-eventId').val(), userLogged: $('#js-userLogged').val(), ajax: true}, function(data){
                    if(data['success']){
                        likeBtn.hide();
                        likeBtn.siblings(".event-liked").show();
                    } else {
                        if(data['noaccess']){
                            window.location.href = data['url'];
                        }
                    }
                },"json");
     });
    // soft delete like
     $(".event-liked").click(function(event){
         event.preventDefault();
                var likeBtn = $(this);
                $.post('/shindig/ajax-unlike-event', { eventId: $(this).siblings('#js-eventId').val(), userLogged: $('#js-userLogged').val(), ajax: true}, function(data){
                    if(data['success']){
                        likeBtn.hide();
                        likeBtn.siblings(".event-like").show();
                    } else {
                        if(data['noaccess']){
                            window.location.href = data['url'];
                        }
                    }
                },"json");
     });
    // hit bottom scrolling, load more results
     $(window).scroll(function() { 
         if($(window).scrollTop() == $(document).height() - $(window).height()) {
             console.log('bottom');

             $.post('/index/ajax-feed-items-by-time', { pager: $("#js-pager").val(), ajax: true}, function(data){
                 $( ".feedContent" ).append( data );
                 $pager = $("#js-pager").val()+10;
                 $("#js-pager").val($pager);
             });
         }
     });

Answer 1

替换

$(".event-like").click(function(event) {

与

$(document).on("click", ".event-like", function(event) {

并且在整个代码中也是如此。它被称为事件委托，，开始阅读它的最佳位置是jQuery documentation。

单击未在附加项目上触发的处理程序

1 个答案: