Function fires as it should not : Is this a matter of propagation ?
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 :
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 :
The problem is :
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 :
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 :
<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 :
$(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 :
//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 :
//Treat like button thread.on('click', 'input[value="Like"]', function () {...//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.
Topic Participants
jakecigar