Question

我有两个互补的功能，一个发布帖子，一个在用户点击同一个按钮时取消发布帖子（该按钮充当切换）。如果帖子未发布并且用户去发布它一切都按预期工作，但是如果用户决定再次取消发布，则错误地再次调用要发布的函数。我正在使用类选择器来完成此任务。因此，publish执行其业务，然后将类设置为取消发布，以便在用户单击按钮时取消发布（不会发生）。

我已经验证了发布在调用后取消发布了类，反之亦然，但是补充函数永远不会被调用，尽管它的类在最后一行中被更改了。 Console.log显示发布不断被调用。

我做错了什么？

$('a.publish').on('click', function(e) {
        console.log('publish item');
        var id = $(this).attr('data-id');
        var table = $(this).attr('rel');
        var parent = $(this).closest('.btn-group');
        var current = $(this).closest('a');
        $.ajax({
            type: 'POST',
            url: '',
            data: 'publish=' + id + '&table=' + table,
            success: function(data) {
                $('#published_' + id).hide().html(data).fadeIn();
                count(table);
                var buttons = parent.find(".btn-danger");
                buttons.each(function() {
                    $(this).removeClass("btn-danger").addClass("btn-primary");
                });
                current.find('span').text('Unpublish');
                current.removeClass("publish").addClass("unpublish");
            }
        });
        e.preventDefault();
    });
    $('a.unpublish').on('click', function(e) {
        console.log('unpublish item');
        var id = $(this).attr('data-id');
        var table = $(this).attr('rel');
        var parent = $(this).closest('.btn-group');
        var current = $(this).closest('a');
        $.ajax({
            type: 'POST',
            url: '',
            data: 'unpublish=' + id + '&table=' + table,
            success: function(data) {
                $('#published_' + id).hide().html(data).fadeIn();
                count(table);
                var buttons = parent.find(".btn-primary");
                buttons.each(function() {
                    $(this).removeClass("btn-primary").addClass("btn-danger");
                });
                current.find('span').text('Publish');
                current.removeClass("unpublish").addClass("publish");
            }
        });
        e.preventDefault();
    });

如果这与DOM或其他什么有关，我怎么能颠覆呢？

HTML：

<a class="btn btn-sm btn-primary unpublish" href="javascript:void(0);" data-id="213114246" rel="projects">
    <i class="glyphicon glyphicon-plus"></i>
    <span class="actions">Unpublish</span>
</a>

Answer 1

＆＃13;

$('.btn-container').on('click', '.btn', function(e) {
  if ($(this).hasClass('publish')) {
      console.log('publish item');
      $(this).removeClass("publish").addClass("unpublish").text('unpublish');
  } else {
      console.log('unpublish item');
      $(this).removeClass("unpublish").addClass("publish").text('publish');
  }
  e.preventDefault();
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-container">
  <a class="btn btn-sm btn-primary unpublish">unpublish</a>
</div>

＆＃13;

Jquery补充功能无法正常工作

1 个答案: