title: Multiple elements with same class make jquery click event to fire multiple times
body: <p>I display user comments. Each comment is one <code>div</code> and each <code>div</code> has <code>&lt;a&gt;</code> tag with class '<code>commentLikeLink</code>'. I bind jquery click event to '<code>commentLikeLink</code>' class but If I have 10 comments and click on one like button I get event fired 10 times. <br/>
  I know that this happen's because I have same class multiple times. But How to stop this?<br/>
  Here's the code:</p>
  
  <pre><code>...
  &lt;div class="commentBox""&gt;
  ...
  @Html.ActionLink(likeText, "LikeComment", "Comment", null, new { id = Model.CommentId, @class = "commentLikeLink" })    
  ...
  </code></pre>
  
  <p>Event code:</p>
  
  <pre><code>$(function () {
              $('.commentLikeLink').click(function (event) {
                  var commentId = event.target.id;
  
                  $.ajax({
                      url: this.href,
                      type: 'POST',                    
                      data: { commentId: commentId },
                      context: this,
                      success: function (result) {
                          if (result.msg == '1') {
                              $(this).text('Dislike');
                          }
                          else if(result.msg == '2') {
                              $(this).text('Like');
                          }
  
                      }
                  });
                  return false;
              });
          });
  </code></pre>