1

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

单击另一个元素后，我有一个按钮会附加到页面上。一旦按钮在那里，用户就可以单击它以将 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（最终）

4

2 回答 2

3

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

小提琴

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

$('.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();
});
于 2013-10-01T20:45:28.887 回答
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);
});

小提琴

于 2013-10-01T20:50:25.890 回答