Question

这对我很有用，我可以get data-club-id：

<!-- this is an example -->
<a class="clubCode" href="" data-club-id= "1234">join with the code</a> 


$("a.clubCode").on("click",function(e){
          e.preventDefault();
    var clubId = $(this).data('club-id');
alert(clubId)
});

但如果我需要像这样使用委托：

<a class="editReview" data-review-id="123" href="">Edit</a>

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

reviewId返回undefined。

<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>

我该怎么办？

Answer 1

试试这种方式

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

为html 5之前的网页进行现场演示：

http://jsfiddle.net/dreamweiver/23XHj/7/

html 5页中的现场演示：

http://jsfiddle.net/dreamweiver/23XHj/8/

快乐编码：）

Answer 2

Check this article on event delegation.

我只能认为你的课程元素＆＃39; editReview＆＃39;不是'eventFeedbackBottomContainer＆＃39;的孩子。除此之外似乎工作正如你写的那样。

Link to Jsfiddle

<div class="eventFeedbackBottomContainer">
     ...
    <a class="editReview" data-review-id="123" href="">Edit</a>
    <a class="editReview" data-review-id="456" href="">Edit</a>
</div>

Answer 3

修好了。问题是那个

<a class="editReview" data-review-id= "12345" href="">Edit</a>

位于<div class="current-review"></div>内。我把它移到外面一切都很有效

这里是JSFiddle

使用委托获取数据属性

3 个答案: