Question

我有点击时使用的代码来更改类

$(document).ready(function(){
    $("div.add").click(function(e){
    $.ajax({url: "?action=add&postid=" + $(this).parents('div.box').first().attr("id")})
    $(this).removeClass('add').addClass('remove');
    });
});
$(document).ready(function(){
    $("div.remove").click(function(e){
    $.ajax({url: "?action=remove&postid=" + $(this).parents('div.box').first().attr("id")})
    $(this).removeClass('remove').addClass('add');
    });
});

当我第一次点击div类从<div class="add">更改为<div class="remove">并且ajax url有效时，但是当我再次从更改的类中单击时，没有任何反应。（它不会改回添加类）

Answer 1

可能是因为在文档就绪事件中没有div元素，其类为remove，因此您的$("div.remove")会返回一个空集合。解决问题的一个选择是使用事件委派技术：

$(document).on('click', 'div.remove', function() {
    // ...
});

但是在这种情况下，我建议使用hasClass和toggleClass方法来切换和检查类名：

$(document).ready(function() {
    $("div.add").click(function(e) {
       var add = $(this).toggleClass('add remove').hasClass('add'),
           id = $(this).closest('div.box').attr("id"),
           action = add ? 'add' : 'remove',
           url = '...';

       $.ajax({
          url: url
       })
    });
});

Answer 2

如果在附加事件处理程序时尚未存在要侦听事件的元素，则最好使用.on方法附加事件处理程序。在你的情况下，你可以这样做：

$(document).on('click', '.add', function() { ... });
$(document).on('click', '.remove', function() { ... });

这称为事件委托，它（根据我自己的理解）将事件处理程序附加到DOM树中的元素上，一旦页面加载，肯定会存在。事件将冒出DOM树（除非被阻止），执行它们传递的元素中的所有事件处理程序。

单击Jquery更改类不起作用

2 个答案: