asp.net mvc - toggling class on click by javascript on ajax post success -
this code works fine first click changes class along image referenced css. when click second time acts clicked in previous class assume removed already.
if(model.seenitwanttoseeit.status==1) { <div class="movie_data"> <div class="usermovie_option"><a href="javascript:void(0)" class="dont_want_to_see_it" title="i have seen movie"> </a></div> </div> <div class="clear"></div> } else{ <div class="movie_data"> <div class="usermovie_option"><a href="javascript:void(0)" class="want_to_see_it" title="i have seen movie"> </a></div> </div> <div class="clear"></div> } and javascript toggling class
$(".want_to_see_it").click(function () { var wanttoseeit = $(this); alert('clicked on want see it.'); $.ajax({ url: '@url.action("seenit", "movieprofile")', data: { status: 1, movieid: movieid }, datatype: 'json', type: "post", success: function (data) { wanttoseeit.removeclass(); wanttoseeit.addclass("dont_want_to_see_it"); $("dont_want_to_see_it").show(); }, error: function (data) { alert('error occurred.'); } }); }); $(".dont_want_to_see_it").click(function () { alert('clicked on donot want see it'); var wanttoseeit = $(this); $.ajax({ url: '@url.action("seenit", "movieprofile")', data: { status: 0, movieid: movieid }, datatype: 'json', type: "post", success: function (data) { wanttoseeit.removeclass(); wanttoseeit.addclass("want_to_see_it"); $("want_to_see_it").show(); }, error: function (data) { alert('error occurred.'); } }); }); and problem shows "clicked on donot want see it" or "clicked on want see it" alert every time click . have message should alternate every time click on respective image.
problem here want change handlers dynamically on click of each element. events bound element directly using click event.
- one option hide , show respective items.
- another option bind , unbind events.
third option use event delegation. requirement work since event delegation events not directly attached elements, instead delegated. moment swap class name event subscribed class name automatically delegated. next click on same element go other event handler attached new
class name. see if looking for.$(document).on('click',".want_to_see_it" ,function (e) { var wanttoseeit = $(this); alert('clicked on want see it.'); ///your ajax wanttoseeit.removeclass(); wanttoseeit.addclass("dont_want_to_see_it"); $(".dont_want_to_see_it").show(); }); $(document).on('click',".dont_want_to_see_it" ,function (e) { alert('clicked on donot want see it'); var wanttoseeit = $(this); ///your ajax wanttoseeit.removeclass(); wanttoseeit.addclass("want_to_see_it"); $(".want_to_see_it").show(); });
note:- in example have attached document, should n't attach document, instead attach containing element present in dom @ time.
demo
there issue, missed . before classname in ajax success.
Comments
Post a Comment