0

我有一个相当简单的脚本，我希望在加载 jQuery 时让 div 消失，添加一个“触发器”元素，我可以单击该元素以使 div 再次出现。然后“触发器”的类被更改，当我再次单击它时，div 应该再次消失。不幸的是，脚本工作正常，直到“触发器”类被更改，如果我再次单击它没有任何反应。

问题已解决

这是工作的JS：

$(document).ready(function () {
if ($('#Bestellungen #Offene .products')) {
    $('#Bestellungen #Offene .products').hide();
    $('#Bestellungen #Offene .products').before('<div class="trigger"></div>');
    $('#Bestellungen #Offene').on('click', '.trigger', function () {
        $(this).addClass('minus').next().show();
    });
    $('#Bestellungen #Offene').on('click', '.trigger.minus', function () {
        $(this).removeClass('minus').next().hide();
    });
}

});

这里是 HTML：

<div id="Bestellungen">
<div id="Offene">
    <table>
        <tr>
            <td>
                <div class="products">blablabla</div>
            <td>
        </tr>
    </table>
</div>

4

3 回答 3

6

如果是动态添加的class元素，您需要委托事件。因为，具有动态class或的元素id被视为dynamic具有该class或的元素id。

当您稍后添加该类minus时.trigger，.trigger.minus将其视为动态元素。

所以试试：

$('#Bestellungen #Offene').on('click', '.trigger.minus', function () {
    $(this).removeClass('minus').next().hide();
});

为了实现委托事件，您需要使用.on()上面的 jQuery 方法。

笔记

委托事件的语法.on()是：

$(StaticParentElement).on(eventName, target, handlerFunction);
于 2012-09-12T16:49:39.027 回答
1

使用on附件过程。

$(document).ready(function () {
if ($('#Bestellungen #Offene .products')) {
    $('#Bestellungen #Offene .products').hide();
    $('#Bestellungen #Offene .products').before('<div class="trigger"></div>');
    $('#Bestellungen #Offene').on('click', '.trigger:not(.minus)', function () {
        $(this).addClass('minus').next().show();
    });

    /* This is the section that doesn't work */
    $('#Bestellungen #Offene').on('click',  '.trigger.minus', function () {
        $(this).removeClass('minus').next().hide();
    });
}

此外，您需要.minus从第一个事件处理程序中过滤掉具有该类的元素，以便在单击具有.minus该类的项目时不会执行它们。

或者，您可以像这样编写代码：

$(document).ready(function () {
if ($('#Bestellungen #Offene .products')) {
    $('#Bestellungen #Offene .products').hide();
    $('#Bestellungen #Offene .products').before('<div class="trigger"></div>');
    $('#Bestellungen #Offene .trigger').click(function () {
        $(this).toggleClass('minus').next().toggle();
    });
}
于 2012-09-12T16:55:37.190 回答
1

它不起作用，因为您没有将“减号”处理程序附加到元素，因为在您尝试绑定它时它没有类。
您可以使用 on 将事件附加到父元素，然后让选择器匹配您的目标，或者您也可以对这两种情况使用单个处理程序：

$('#Bestellungen #Offene .trigger').click(function () {
    $(this).toggleClass('minus').next().toggle($(this).hasClass('minus'));
});

这是有效的，因为切换函数接受一个布尔参数，指示是显示还是隐藏元素。

于 2012-09-12T17:01:27.533 回答