Jquery If 语句保持循环

Question

我有这两个 Jquery 单击事件，它们会 hide/display 彼此的按钮，但不会循环。我应该使用 Jquery 'toggle' 事件吗？谢谢！！

        // Desktop onclick function to re-display first 2 drop down lists
        $editDeskBtn.on('click', function () {
            $disDeskSel1.fadeOut();
            $disDeskSel2.fadeOut();
            $firstTwoInputs
                .css("display", "block")
                .hide()
                .fadeIn();
            $editDeskBtn.replaceWith($saveDeskBtn);
            $saveDeskBtn.css("display", "block");

        });
        // *******************************************************************

    // Desktop onclick function for SAVE button
    $saveDeskBtn.on('click', function () {
        $firstTwoInputs.fadeOut();
        // show first two input results
        $disDeskSel1.fadeIn();
        $disDeskSel2.fadeIn();
        $saveDeskBtn.replaceWith($editDeskBtn);
        $editDeskBtn.css("display", "block");
    });

Answer 1

问题出在您对 replaceWith 的使用上。当您替换一个元素时，它的所有事件绑定都会丢失。

不要替换元素，只需将两个元素都保留在 DOM 中，然后使用 .hide 和 .show 显示您想要的那个。

$editDeskBtn.on('click', function () {
    $disDeskSel1.fadeOut();
    $disDeskSel2.fadeOut();
    $firstTwoInputs.hide().fadeIn();
    $editDeskBtn.hide();
    $saveDeskBtn.show();

});
// *******************************************************************

// Desktop onclick function for SAVE btn
$saveDeskBtn.on('click', function () {
    $firstTwoInputs.fadeOut();
    // show first two input results
    $disDeskSel1.fadeIn();
    $disDeskSel2.fadeIn();
    $saveDeskBtn.hide();
    $editDeskBtn.show();
});

我还用 .show 和 .hide 替换了你所有的 .css 电话。

如果您确实需要使用 replaceWith，请按照 Event binding on dynamically created elements?

中所述使用事件委托

Jquery If 语句保持循环

Jquery If statement to keep loop

jquery

events

click