Вложенные обработчики кликов в JavaScript плохой практике?

Question

Я работал над этим простым плагином для практических целей, и я столкнулся со следующей проблемой: В принципе, я хочу иметь несколько ползунков изображений, которые управляются одним и тем же кодом JS, но, очевидно, независимо друг от друга. То, как мне удалось это сделать, - это обработчики Click для кнопок «Left» и «Right» внутри обработчика Click кнопки, которая «активирует» этот конкретный слайдер. Потому что по какой-то причине, если у меня есть обработчики кнопок «Влево/Вправо» за пределами обработчика кнопок «активировать», они не выполняются.

РАБОТЫ:

$('item').click(function() { 
     var itemNum = $(this).index() + 1; 
     var $leftArrow = $('#item' + itemNum + ' .left-arrow'); 
     var $rightArrow = $('#item' + itemNum + ' .right-arrow'); 

     $leftArrow.click(...); 
     $rightArrow.click(...); 
    }); 

НЕ РАБОТАЕТ:

var $leftArrow, $rightArrow; 

    $('item').click(function() { 
     var itemNum = $(this).index() + 1; 
     $leftArrow = $('#item' + itemNum + ' .left-arrow'); 
     $rightArrow = $('#item' + itemNum + ' .right-arrow'); 
    }); 

    $leftArrow.click(...); 
    $rightArrow.click(...); 

Так что мой вопрос; это плохая практика делать так? Как и он начнет захватывать дополнительную память, если пользователь активирует слайдер item1, затем активирует слайдер item2 и т. Д. Если да, то для чего лучше.

Извините за такой длинный вопрос, я очень благодарен вам за то, что вы потратили время, чтобы прочитать все это. :)

ПРИМЕЧАНИЕ. Предполагается, что только один слайдер должен быть активирован одновременно.

Answer 1

Для тех, кто также борется с этим, получается, когда вы вставляете обработчики кликов, каждый из них запускается в отдельном потоке или что-то в этом роде. Обратите внимание ниже:

http://jsfiddle.net/054nkc2a/

Если нажать кнопку Первый обработчик щелкните второй кнопки активируется. После нажатия второй кнопки функция внутри обработчика кликов работает ONCE.

Однако, если вы дважды щелкнете по первой кнопке, а затем нажмите кнопку «Вторая»; функция внутри обработчика Click второй кнопки работает TWICE!

Одним из возможных решений, чтобы остановить это, является то, что вторая кнопка «отвязана» после того, как она сделала то, что предполагалось. Поэтому, если вы нажмете кнопку «Первая», затем «Вторая», а затем «Отменить», на второй кнопке теперь не будет обработчика кликов (как это было первоначально при загрузке страницы). Затем процесс повторяется.

Я надеюсь, что это поможет кому-то, потому что это случилось, решение моей проблемы :)

HTML:

<button id="button1">First</button> 
<button id="button2">Second</button> 
<button id="unbind">Unbind</button> 

<div class="text"></div> 

JS:

$(document).ready(function() { 

    $text = $('.text'); 

    $('#button1').click(function() { 
     $text.append('<p>First</p>') 

     $('#button2').click(function() { 
      $text.append('<p>Second</p>') 
     }); 

     $('#unbind').click(function() { 
      $('#button2').unbind('click'); 
     }); 
    }); 

});