Question

我有一个相当简单的脚本，我希望在jQuery加载时div消失，添加一个“trigger”元素，我可以单击该元素以便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>

Answer 1

如果动态添加class元素，则需要委托事件。因为，动态class或id的元素被视为dynamic或class的{{1}}元素。

当您稍后将课程id添加到minus时，.trigger将其视为动态元素。

所以试试：

.trigger.minus

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

注意

委托事件的$('#Bestellungen #Offene').on('click', '.trigger.minus', function () { $(this).removeClass('minus').next().hide(); });语法为：

.on()

Answer 2

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

Answer 3

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

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

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

jQuery没有对点击添加的类做出反应

3 个答案:

注意