Question

我在页面中的2个标签之一中有此链接，但每当我点击a.editReview时，页面都会重新加载，而e.preventDefault()似乎无效。我知道问题出在其他地方，但我无法真正看到它。

$(document).ready(function() {

    /* Activate our reviews */
    $().reviews('.starReviews');

    $('.tabs a').on("click", function() {
        var $this = $(this);
        $('.panel').hide();
        $('.tabs a.active').removeClass('active');
        $this.addClass('active').blur();
        var panel = $this.attr('href');
        $(panel).fadeIn(250);

        return false;
    });//end click

    $('.tabs li:first a').click();

    $("a.editReview").on("click", function(e) {
        e.preventDefault();
        var reviewId = $(this).data('review-id');
        alert(reviewId);        
    }); //edit review click function

});//document ready function

<div class="eventFeedbackBottomContainer">
    <div class="tabs">
        <ul>
            <li><a href="#panel1" tabindex="1">Reviews</a></li>
            <li><a href="#panel2" tabindex="2">Hotels</a></li>
        </ul>
    </div>

    <div class="rightFeedbackBottomContainer">
        <a href="/addReview/<?php echo escape($eventReview->getData()->race_id);?>/" id="" class="Smallbut">Add Review</a>
    </div>

    <div id="panel1" class="panel">
        <div class="feedbacksContainer">
            <div class="show-reviews"></div><!-- a.editReview is inside each review loaded from a javascript file in this div-->
        </div>                                
    </div>

    <div id="panel2" class="panel"/>
</div>

的更新 的

正如dfsq所建议的那样，我开始阅读有关授权的内容，这对于那些正在努力理解它的人来说是一个良好的开端，就像我一样！ Delegation

Answer 1

当您需要将事件释放到父容器时，就是这种情况：

$(".eventFeedbackBottomContainer").on("click", "a.editReview", function(e){
      e.preventDefault();
      var reviewId = $(this).data('review-id');
      alert(reviewId);        
});

这是因为链接是在DOMContentLoaded事件之后动态加载的，您在页面加载时没有.editReview链接可用，因此您无法将事件绑定到它们。但是您可以将click事件侦听器绑定到父容器（例如.eventFeedbackBottomContainer）并侦听从DOM树中的所有子元素冒泡的所有单击事件。这种方式即使您稍后注入相关链接，您的事件监听器也能够检测到它们的点击次数。

Answer 2

尝试这样，它会起作用：

$("a.editReview").click(function(e){
  e.preventDefault();
  var reviewId = $(this).data('review-id');
  alert(reviewId);        
});

preventDefault（）不起作用，页面重新加载

2 个答案: