html - How jQuery propagation works? -
i work on web app social network parts.
the purpose of code display posts particular user (ie user may have voted 'like' or 'dislike' 1 of many of displayed 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¤tcontext=${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¤tcontext=${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> once list of posts displayed, jquery code used manage voting user. have i'm beginner in js/jquery, , question focus on particular behaviour of jquery don't understand.
$(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 button thread.on('click', this.children("input.like"), function () { //retrive vode , 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 , 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'); } }); }); }); with code above, user able click on button "like" or "dislike", or clear vote.
if use code (management of "like" button) execution of code won't stop , execute "dislike" button code :
//treat button thread.on('click', **this.children("input.like")**, function () {... //treat dislike button thread.on('click', **this.children("input.dislike")**, function () {... but if use one, everything's fine, "like" click treated :
//treat button thread.on('click', **'input[value="like"]'**, function () {... //treat dislike button thread.on('click', **'input[value="dislike"]'**, function () {... so question propagation (i guess) :
why, in first case, clicking on "like" button execute "like" part of code "dislike" 1 ?
why, in second case, clicking on "like" button ok, stopping treatment @ right time ?
asking such question understand behaviour of jquery. i've read many articles on web , lot of w3school pages jquery, not clear me.
thanx advance.
Comments
Post a Comment