jQuery on() variable as selector issue -

i can't understand i'm doing wrong , why code works fine:

$(document).on('click', '[data-slider-next]', function() {     slider('next'); }); 

while breaks behaviour of slider:

var $slider_next_btn = $('[data-slider-next]'); $(document).on('click', $slider_next_btn, function() {     slider('next'); }); 

context:

• first: http://jsfiddle.net/ynts/zend2/;
• second: http://jsfiddle.net/ynts/6frsn/.

---

<div class="b-slider" data-slider>     <div class="b-slider__arrow b-slider__arrow_l" data-slider-prev>←</div>     <div class="b-slider__arrow b-slider__arrow_r" data-slider-next>→</div>     <div data-slide data-content="1.1"></div>     <div data-slide data-content="1.2"></div>     <div data-slide data-content="1.3"></div> </div>  // slider function itself. function slider( _direction ) {      var $slide = $('[data-slide]'),         $inactive = $('[data-slide]:not([data-slide-active])'),         $active = $('[data-slide][data-slide-active]');     if ( $active.length == 0 ) var $active = $slide.first();      var content = $active.attr('data-content');      // functions loaded slider.     if ( _direction == 'load') {         $inactive.hide();         $active.show()         .text(content)         .attr('data-slide-active', '');     }      // functions slider button.     else {         $inactive.hide();          // functions next slider button.         if ( _direction == 'next') {             var $next = $active.next('[data-slide]').length ? $active.next('[data-slide]')             : $slide.first();         }          // functions prev. slider button.         else if ( _direction == 'prev') {             var $next = $active.prev('[data-slide]').length ? $active.prev('[data-slide]')             : $slide.last();         }          // functions slider action.         $next.show()         .text(content)         .attr('data-slide-active', '');         $active.hide().removeattr('data-slide-active');     } }  // slider loaded $('[data-slider-next]').ready(function() {     slider('load'); });  // & next button var $slider_next_btn = $('[data-slider-next]'); $(document).on('click', $slider_next_btn, function() {     slider('next'); });  // & prev. button var $slider_prev_btn = $('[data-slider-prev]'); $(document).on('click', $slider_prev_btn, function() {     slider('prev'); }); 

it makes no sense imho try , use way.

if want bind event selection of elements have (and don’t need delegation), should use $slider_next_btn.on("click", handlerfunction) (without selector in case) in first place.