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

Question

我有一个相当简单的脚本,我希望在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>

Answer 1

如果是动态添加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);