Jquery 切换类值未被下一个 Jquery 函数选中

Question

我有两个函数添加到收藏夹，从收藏夹中删除这两个函数应该在点击时交替工作......但是即使一个函数改变了类(并给出了预期的效果)，jquery 无法选择改变的值运行其他函数的类...

html

<a href="#"><img class="<?php if($favorite == 1){ echo 'alreadyfavorite';} else { echo 'addtofavorite';} ?>" src="../images/system/addtofavorite.png"></a>

查询

// On Search Property Results Page - Add to Favorite Button (Heart)

        $('.addtofavorite').click(function() {
            alert("add");
            var reference = this;
            $(reference).toggleClass("addtofavorite alreadyfavorite");

        });


        // On Search Property Results Page - Remove from Favorite Button (Heart)
        $('.alreadyfavorite').click(function() {
            alert("delete");
            var reference = this;
            $(reference).toggleClass("addtofavorite alreadyfavorite");

    });

警报应该说添加，然后 css 应该更改然后警报应该说删除，然后 css 应该更改，然后警报应该说是 css 应该更改...

只有 css 发生了变化，但警报保持不变......

Answer 1

如果将 $('.addtofavorite').click(function() { 更改为 $(document).on('click', '.addtofavorite', function() { 它可以按照您的意愿工作。

注意:CSS 只是为了示例的可见性。

希望对你有帮助

$(document).on('click', '.addtofavorite', function() {
  alert("add");
  var reference = this;
  $(reference).toggleClass("alreadyfavorite addtofavorite");

});


// On Search Property Results Page - Remove from Favorite Button (Heart)
$(document).on('click', '.alreadyfavorite', function() {
  alert("delete");
  var reference = this;
  $(reference).toggleClass("alreadyfavorite addtofavorite");

});

.alreadyfavorite {
  height: 50px;
  width: 50px;
  background-color: yellow
}
.addtofavorite {
  height: 50px;
  width: 50px;
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">
  <img class="alreadyfavorite" />
</a>