jQuery Forum

Hi,

I'm new to jQuery (and JS), I'm discovering the powerfulness of this tool. As I'm a beginner, I still do not understand all the mechanics and behaviours jQuery is based upon. So I'm sorry if this question is a poor one, but I didn't found anything about this.

I work on a web app with social parts : users may write posts, answer posts, and like/dislike posts. My question is about the treatment of like/dislike functions.
Before, you should know that like/dislike informations for a post are displayed by taking into account the user actually watching his screen. For a given post, many like/dislike votes are registered, but a particular user may have vote or not for one post.

Here is my JSP code (JSTL) that will display a list of posts :

1. <c:forEach var="post" items="${requestScope['postVotes']}">
     <div class="thread" data-post="${post.key.messageId}"
     data-vote="${post.value}"
     data-response-level-message="${post.key.responseLevelMessage}">
     <c:if test="${post.key.responseLevelMessage == 0}">
       <hr>
       <font size="2"> Le <fmt:formatDate
       value="${post.key.messageDate}" /> par <a
       href="${pageContext.request.contextPath}/CentralStation?section=votePage&CurrentContext=${post.key.messageId}">${post.key.messageSender}</a><br>
       <br> ${post.key.messageTitle}<br>
       ${post.key.messageContent}<br>
       <p class="postId"></p>
       </font>
     </c:if>
     <c:if test="${post.key.responseLevelMessage > 0}">
       <font size="1"> <a
       href="${pageContext.request.contextPath}/CentralStation?section=votePage&CurrentContext=${post.key.messageId}">${post.key.messageSender}</a><br>
       <br> ${post.key.messageContent}<br>
       <p class="postId"></p>
       </font>
     </c:if>
   
     <input type="image" class="like" src="img/up.png"
       data-vote="${post.value}" value="Like"> 
     <input
       type="image" class="dislike" src="img/down.png"
       data-vote="${post.value}" value="Dislike">
     </div>
   </c:forEach>

Now jQuery is in action : the displayed buttons (image type) can be clicked to like/dislike.
For this purpose, I've got 2 functions triggered with OnClick event :

1. $(document).ready(function () {
     $('.thread').each(function () {
       //Previons function
       var thread = $(this);
       var val = thread.data("vote");
       thread.find("p").text(val);
       if (val == 1) {
         thread.find(".like").addClass('voted');
       }
       else if (val == -1) {
         thread.find(".dislike").addClass('voted');
       }
     });
   });
   $(document).ready(function () {
     $('.thread').each(function () {
       var thread = $(this);
   
       //Treat like button
       thread.on('click', this.children("input.like"), function () {
           //Retrive vode and increment
         var vote = thread.data("vote");
         if(vote <= 0){
             vote = 1;
         }
         else if (vote == 1) {
             vote = 0;
         }
         //modify data-vote
         thread.data("vote", vote);
         //print vote
         thread.find("p").text(vote);
         if (vote == 1) {
           thread.find(".like").addClass('voted');
           thread.find(".dislike").removeClass('voted');
         } else if (vote == 0){
           thread.find(".dislike").removeClass('voted');
           thread.find(".like").removeClass('voted');
         }
       });
       //Treat dislike button
       thread.on('click', this.children("input.dislike"), function () {
           //Retrive vode and increment
           var vote = thread.data("vote");
           if(vote >= 0){
             vote = -1;
           }
           else if (vote == -1) {
             vote = 0;
           }
           //modify data-vote
           thread.data("vote", vote);
           //print vote
           thread.find("p").text(vote);
           if (vote == -1) {
             thread.find(".like").removeClass('voted');
             thread.find(".dislike").addClass('voted');
           } else if (vote == 0){
             thread.find(".dislike").removeClass('voted');
             thread.find(".like").removeClass('voted');
           }
       });
     });
   });

The problem is :

1. //Treat like button
       thread.on('click', this.children("input.like"), function () {...
   
   //Treat dislike button
           thread.on('click', this.children("input.dislike"), function () {...

Written this way, clicking on the Like button (for example) will trigger the Like function, THEN the Dislike function will also be executed : this is the problem.

The only way for the function to work fine is to write the functions this way :

1. //Treat like button thread.on('click', 'input[value="Like"]', function () {...
2. //Treat dislike button thread.on('click', 'input[value="Dislike"]', function () {...

SO, can someone tell me why jQuery behaves this way and why the first way of writing my functions is not the good one ?

Thanx for your help.