Question

我有一个项目（#engaged），我必须在jQuery点击上添加一个类。有20种变体，如果用户点击不同的类，将添加到#engaged。

例如，如果用户单击#one，则应将类.one添加到#engaged。同样，如果用户单击#two，则应将类.two添加到#engaged。

我知道怎么做，但问题是它只能在页面加载上运行一到两次。即使我在下次点击时删除了之前添加的课程，也不接受更多点击。如何在不重新加载页面的情况下接受更多点击？

$("#one").click(function () {
    $("#engaged").mouseenter(function () {
        $(this).addClass("one");
    });
    $("#engaged").mouseleave(function () {
        $(this).removeClass("one");
    });
});

$("#two").click(function () {
    $("#engaged").mouseenter(function () {
        $(this).addClass("two");
    });
    $("#engaged").mouseleave(function () {
        $(this).removeClass("two");
    });
});

.....等等

Answer 1

如果您使用的是.click事件，它将不适用于动态创建的元素：

$(‘.selector’).click(function () {

请尝试使用.on('click')：

$(‘selector’).on('click', '.selector', function () {

参考：In jQuery, how to attach events to dynamic html elements?

参考文献2：Difference between .on('click') vs .click()

Answer 2

如果你的点击目标上有一个共同的类（你当然应该这样），我会对它进行一次破解。

$('.myCommonClass').click(function() {
    var myStr = $(this).attr('id').replace('#', '');

    $('#engaged').attr('class', '').addClass(myStr);
});

http://jsfiddle.net/isherwood/zeNVW/

jQuery点击不能多次工作以更改相同的div

2 个答案: