jquery - 单击后 append 按钮不会执行任何操作

Question

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

我有一个按钮，一旦单击另一个元素，该按钮就会 append 到页面上。一旦按钮出现，用户就可以单击它来将 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

您正在将事件(委托(delegate)) append 到.article，但单击它后您将切换类。所以注册的事件就丢失了。您需要将事件(用于委托(delegate))绑定(bind)到始终存在的元素(容器)，或者只是将一个公共(public)类名添加到不会更改的 .article 元素并将事件绑定(bind)到该类选择器。

<强> 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();
});