Question

我已经为此做了很多研究，并发现了大量关于溢出的问题，但没有任何效果。

一旦点击了另一个元素，我就会在页面上附加一个按钮。一旦按钮在那里，用户就可以点击它以最小化div回到原来的样子。似乎有很多问题，但几乎没有人有一个检查答案和建议说尝试的东西似乎不起作用。我已经使用了.on（'click'）函数，它仍然无效。

我有一个小问题，如果您需要更多代码，请告诉我！

的jQuery

function newsArticle() {
    $('.article').on('click', function() {
        $('.article').append('<span class="close">Click to minimize article</span>');
        $('.article').removeClass('article').addClass('fullArticle');
    });

    $('.fullArticle').on('click', '.close', function() {
        $('.fullArticle').removeClass('fullArticle').addClass('article');
        $('.close').hide();
    });
}

newsArticle();

最终代码（答案）

function newsArticle() {
    $('.article').on('click', function() {
        var self = this;
        var button = $('<span />', {
            'class': 'close',
            text: 'Click to minimize article',
            on: {
                click: function (e) {
                    e.stopPropagation();
                    $(self).toggleClass('fullArticle article');
                    $(this).remove();
                }
            }
        });
    if($(event.target).is('.article')) {
        $(this).append(button);
    }
    else if($(event.target).parents().is('.article')) {
        $(this).append(button);
    }
    $(this).removeClass('article').addClass('fullArticle');
    });
}

newsArticle();

我没有从答案中复制并粘贴此代码，我写这篇文章是为了保留我今天在Stackoverflow上学到的知识：D

jsfiddle（开始）

jsfiddle（最后）

Answer 1

您正在将事件（委托）附加到.article，但点击它即可切换类。因此注册的事件将丢失。您需要将事件（用于委托）绑定到始终存在的元素（容器），或者只是将公共类名添加到.article元素，该元素不会更改并将事件绑定到该类选择器。

<强> Fiddle

您的代码中还有其他问题，点击关闭后您需要阻止点击事件传播到父.article，否则它会冒泡并再次添加一个关闭按钮执行其父项点击处理程序。

$('.article').on('click', function () {
    $(this).append('<span class="close">Click to minimize article</span>').toggleClass('article fullArticle');
});
   $('.commoncls').on('click', '.close', function (e) {
     e.stopPropagation();
     $(this).closest('.commoncls').toggleClass('fullArticle article').end().remove();
});

Answer 2

我是这样做的：

$('.article').on('click', function () {
    var self = this;
    var button = $('<span />', {
        'class': 'close',
        text: 'Click to minimize article',
        on: {
            click: function (e) {
                e.stopPropagation();
                $(self).removeClass('fullArticle').addClass('article');
                $(this).remove();
            }
        }
    });
    $(this).removeClass('article').addClass('fullArticle').append(button);
});

FIDDLE

点击附加按钮什么都不做

2 个答案: