ajax成功后通过javascript点击切换类

这段代码在第一次单击时运行良好，因为它改变了类以及从CSS引用的图像。但当我第二次单击时，它的行为就像在上一节课中单击一样，我假设它已经被删除了

 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 this movie">&nbsp;</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 this movie">&nbsp;</a></div>    
                    </div>
                    <div class="clear"></div>

              }

---

问题是每次我点击时，“点击不想看到”或“点击想看到”都会显示为警报。我要做的是，每次单击它们各自的图像时，此消息都应该交替出现。

问题是您需要

取消绑定（“单击”）

以清除以前的处理程序，然后为其新类绑定新的事件处理程序

在一个处理程序中执行以下操作，而不是解除绑定和重新绑定：

$(".usermovie_option a").on("click", function () {
    var status = 0;
    if ($(this).hasClass("want_to_see_it")) {
        status = 1;
    }
    $.ajax({
        url: '@Url.Action("SeenIt", "MovieProfile")',
        data: { Status: status, MovieID: movieID,
        dataType: 'json',
        type: "POST",
        success: function (data) {                
            $(this).toggleClass("want_to_see_it");
            $(this).toggleClass("dont_want_to_see_it");
        },
        error: function (data) {
            alert('Error occurred.');
        }

    });

});

---

这里的问题是，您希望在单击每个元素时动态更改处理程序。但是事件是使用click事件直接绑定到元素的

一个选项是隐藏和显示相应的项目

另一个选项是绑定和解除绑定事件

第三种选择是使用事件委派。您的需求将与此配合使用，因为对于事件委派，事件不会直接附加到元素，而是委派。因此，当您将订阅的类名事件交换为该类名时，将自动获得委派。因此，下一次单击同一元素将转到附加其新的

类名的另一个事件处理程序。看看这是不是你要找的

 $(document).on('click',".want_to_see_it" ,function (e) {
   var wantToSeeIt = $(this);
    alert('clicked on want to 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 to see it');
    var wantToSeeIt = $(this);
    ///Your ajax
    wantToSeeIt.removeClass();
    wantToSeeIt.addClass("want_to_see_it");
    $(".want_to_see_it").show();

});

注意：-在我附加到文档的示例中，您不应该将其附加到文档，而应该随时将其附加到DOM中存在的任何包含元素

---

还有一个问题，您在ajax成功中错过了类名称之前的

。

您希望同一元素交替使用不同的clickevent吗？

 $(document).on('click',".want_to_see_it" ,function (e) {
   var wantToSeeIt = $(this);
    alert('clicked on want to 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 to see it');
    var wantToSeeIt = $(this);
    ///Your ajax
    wantToSeeIt.removeClass();
    wantToSeeIt.addClass("want_to_see_it");
    $(".want_to_see_it").show();

});