$('# Element'). Вкл / выкл Jquery не работает после второго раза

Question

У меня есть следующий код jQuery (мой первый самодельный код jQuery, так что не будьте слишком строги ко мне:)). Все работает отлично, когда я впервые использую переключатели:

• Я нажимаю на правое переключение, #content перемещается и появляется левое переключение.
• Я нажимаю на левый переключатель, #content перемещается назад и появляется правый переключатель. (все возвращается в исходное положение).

Но после этого мой правый тумблер больше не активируется (хотя он появляется). Я хотел бы делать одно и то же снова и снова (щелчок правой кнопкой мыши, #content Moves и т. Д. И т. Д.). Но с моим текущим кодом я могу сделать эту анимацию только один раз.

Может кто-нибудь мне помочь:)?

Заранее спасибо:)

    //starting values 
    $(".rowToggleL").off('click');    
    $(".rowToggleR").on('click'); 

    //Right Toggle
    $(".rowToggleR").click(function () {

        // make Toggle Right unclickable, make Toggle Left clickable
        $(".rowToggleR").off('click'); 
        $(".rowToggleL").on('click'); 


        //animate contentbox
        $("#content").animate({
            left: "-=300" // animate to the right
        }, 800, 

         // Animation complete. Make Toggle Right invisible, make Toggle Left visible 
        function() {
            $(".rowToggleR").css("display", "none");
            $(".rowToggleL").css("display", "inline");
        });


    });

    //Left Toggle
    $(".rowToggleL").click(function () {

        // make Toggle Left  unclickable, make Toggle Right clickable
        $(".rowToggleL").off('click');    
        $(".rowToggleR").on('click'); 

     //animate contentbox
        $("#content").animate({
            left: "+=300" // animate to the right
        }, 800, 

         // Animation complete. Make Toggle Left invisible, make Toggle Right visible.
        function() {
            $(".rowToggleL").css("display", "none");

            $(".rowToggleR").css("display", "inline");   
        });

    });

Answer 1

У вас много ненужного кода. Вам не нужно включать и выключать. Также jquery имеет функцию скрытия и показа. Это должно работать:

//Right Toggle
$(".rowToggleR").click(function() {
    //animate contentbox
    $("#content").animate({
        left: "-=300" // animate to the right
    }, 800,
            // Animation complete. Make Toggle Right invisible, make Toggle Left visible 
                    function() {
                        $(".rowToggleR").hide();
                        $(".rowToggleL").show();
                    });


        });

//Left Toggle
$(".rowToggleL").click(function() {
    //animate contentbox
    $("#content").animate({
        left: "+=300" // animate to the right
    }, 800,
            // Animation complete. Make Toggle Left invisible, make Toggle Right visible.
                    function() {
                        $(".rowToggleL").hide();
                        $(".rowToggleR").show();
                    });

        });

Answer 2

Потому что jQuery включен и выключен не переключатели для ранее установленных обработчиков!

Когда вы звоните on()Вы добавляете обработчик (функцию) к событию. Но когда вы звоните off()Вы удаляете все обработчики, прикрепленные к событию.

Когда вы звоните on('click'), вы не активируете ранее установленный вами обработчик:

$(".rowToggleR").click(function () {});  // Which equals $(".rowToggleR").on('click', function () {});

Но вместо этого вы добавляете другую функцию для вызова при нажатии.