Question

我一直在研究一个项目，我必须使用一些jQuery来更改特定div的类，然后我必须使用另一块jQuery来定位该div以执行特定的操作。我的问题是，当我的div类被更改时，我无法使用新类来定位它。

HTML代码 -

<div class="box"></div>

<h1 class="change-class">Change class name</h1>

<br> <a class="hide-new">Hide new named</a>

jQuery代码 -

$(".change-class").click(function () {
    $(".box").removeClass('box').addClass('test box');
});

$(".test").click(function () {
    $('.test').toggle(500);
});

我在JSFiddle中创建了一个示例项目 - http://jsfiddle.net/KT9kn/

任何帮助都将不胜感激。

杰米

Answer 1

在存在该类的元素之前，将click处理程序绑定到类test。对于实时绑定使用

$(document).on('click', '.test', function() {
    ...
});

Answer 2

您想要使用延期事件。变化：

$(".test").click(function () {
    $('.test').toggle(500);
});

为：

$("ELEMENT THAT CONTAINS YOUR BOX").on('click', '.test', function () {
    $(this).toggle(500);
});

Answer 3

JQuery事件绑定仅适用于当前找到的现有元素。将click事件绑定到.test时，JQuery找不到要绑定的元素。将您的代码更改为：

$(".change-class").click(function () {
    $(".box").removeClass('box').addClass('test box');
    $(".test").click(function () {
        $('.test').toggle(500); 
    });
});

或者，请参阅SO问题 Event binding on dynamically created elements?用于动态添加事件。

Answer 4

$(".change-class").click(function () {
    var changed = $(".box").removeClass('box').addClass('test');
    changed.click(function() {
        $(this).toggle(500);
    });
});

在本地使用变量，您可以存储jquery对象，然后在执行更改后使用该变量附加click事件。

你也可以绕过这个变量并按照这样做：

$(".change-class").click(function () {
    $(".box").removeClass('box').addClass('test').click(function() {
        $(this).toggle(500);
    });
});

但它变得不那么可读了。

使用jQuery重命名div然后定位该div

4 个答案: