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元素被視為具有class或id dynamic元素。

當您稍后將類minus添加到.trigger ， .trigger.minus視為動態元素。

因此，請嘗試：

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

為了實現委托事件，您需要使用上述jQuery的.on()方法。

注意

委托事件的.on()語法為：

$(StaticParentElement).on(eventName, target, handlerFunction);

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'));
});

之所以可行，是因為切換功能接受一個布爾參數，該參數指示是顯示還是隱藏元素。