Question

我制作了一个类似的系统，但当我点击相似的按钮时它会运行，但我必须为我刷新页面，然后能够点击不同的按钮，即使它出现了吗？请帮助我，我需要它能够点击并在彼此之后工作....

<script type="text/javascript">
$(document).ready(function(){
 $('.like').click(function(){
  if($(this).attr('title')=='like'){
   $.post('/like.php',{imid:$(this).attr('id'),action:'like'});
    $(this).removeClass('like').addClass('unlike');
    $(this).attr('title','unlike');
  }
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
    $('.unlike').click(function(){
   if($(this).attr('title')=='unlike'){
    $.post('/like.php',{imid:$(this).attr('id'),action:'unlike'});
     $(this).removeClass('unlike').addClass('like');
     $(this).attr('title','like');
    }
  });
});
</script>

Answer 1

我认为@Steven Britton的答案应该有效 - 除非他错过了喜欢的活动。

以下适用于我：

<script type="text/javascript">
$(function(){
    $('body')
    .on('click', '.like', function(){
        // Do whatever to register action
        $(this).removeClass('like').addClass('unlike').attr('title', 'unlike');
    })
    .on('click', '.unlike', function(){
        // Do whatever to register action
        $(this).removeClass('unlike').addClass('like').attr('title', 'like');
    });
});
</script>

我没有看到测试的必要性（如果title =不同），因为你有类似/不同的类别。如果您要进行测试，我建议您通过测试类来进行测试 - 一旦您更改为文本（例如翻译页面），标题中的文本测试就会中断。文本是演示文稿的一部分，数据结构的类部分。

您可以为所有链接提供一个共同的类（例如＆＃34;喜欢 - 不像＆＃34;）除了类似或不同的类，并使用如下内容：

<script type="text/javascript">
$(function(){
    $('body').on('click', '.like-unlike', function(){
        if( $(this).hasClass('like') ){     
            // Do whatever to register action
            $(this).removeClass('like').addClass('unlike').attr('title', 'unlike');
        } else if( $(this).hasClass('unlike') ){
            // Do whatever to register action
            $(this).removeClass('unlike').addClass('like').attr('title', 'like');
        } else {
            // SHould never happen - log error?
        }
    });
});
</script>

回答关于如何使用委托事件的评论：.on是（使用这样的话）使用委托事件。我将事件绑定到文档正文，而不是类似按钮。当用户点击相似的按钮时，事件会冒泡到我的委托事件运行的主体（假设点击的元素与我给出的选择器匹配.on（.eg＆＃34; .like-different＆＃） 34;在我的最后一个例子中）。

不同之处在于，原始代码说＆＃34;当页面加载时找到所有带有类的元素＆＃39;喜欢＆＃39;并将此点击事件附加到他们以及所有与课程相关的元素＆＃39;不同于＆＃39;并将该点击事件附加到他们＆＃34;。当click事件运行时，它会将类从like变为不同。但是因为该元素没有类＆＃34;不像＆＃34;当文件加载时，它没有找到然后没有得到该事件。事实上它仍然有＆＃34;喜欢＆＃34;事件处理程序甚至在将类更改为＆＃34之后;与＆＃34;因为该事件处理程序在页面加载时附加到元素。使用特定类找到附加事件的元素列表这一事实并不重要 - 列表中的元素获取该事件处理程序并保留它。

通过使用.on的三参数形式附加到正文，然后我们根据元素在单击时所具有的类来运行事件，而不是在文档加载时它具有的类。 / p>

我的第二个例子（使用like-different类）实际上也可以作为非委托事件工作，但我仍然认为委托事件在这里更好 - 你可能最终用ajax请求或其他东西加载内容。

Answer 2

给它一个镜头（通过使用ON，你在尚未应用的类上设置一个事件处理程序）：

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','.unlike', function(){
   if($(this).attr('title')=='unlike'){
    $.post('/like.php',{imid:$(this).attr('id'),action:'unlike'});
     $(this).removeClass('unlike').addClass('like');
     $(this).attr('title','like');
    }
  });
});
</script>

在jQuery事件更新之前需要页面刷新

2 个答案: