的jQuery的（）變量選擇問題

Question

我不明白我在做什麼錯的，爲什麼這個代碼工作得很好：

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

而這打破了滑蓋的行爲：

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

上下文：

• 第一個：http://jsfiddle.net/ynts/zenD2/;
• 第二個：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 for loaded slider. 
    if (_direction == 'load') { 
     $inactive.hide(); 
     $active.show() 
     .text(content) 
     .attr('data-slide-active', ''); 
    } 

    // Functions for any slider button. 
    else { 
     $inactive.hide(); 

     // Functions for next slider button. 
     if (_direction == 'next') { 
      var $next = $active.next('[data-slide]').length ? $active.next('[data-slide]') 
      : $slide.first(); 
     } 

     // Functions for prev. slider button. 
     else if (_direction == 'prev') { 
      var $next = $active.prev('[data-slide]').length ? $active.prev('[data-slide]') 
      : $slide.last(); 
     } 

     // Functions for any 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'); 
}); 

Answer 1

即使嘗試和使用它也沒有任何意義。

如果你想要綁定一個事件到你已經擁有的一些元素（甚至不需要委派），那麼你應該首先使用$slider_next_btn.on("click", handlerFunction)（這裏沒有選擇器）。

Answer 2

從jQuery的文檔：http://api.jquery.com/on/

選擇

類型：String 選擇器串以過濾觸發事件的選定元素的後代。如果選擇器爲空或省略，則該事件在到達選定元素時始終觸發。

您正在傳遞對返回的jQuery對象（帶有可變用例）的引用。更新到：

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

它會工作。

如果你緩存使用的變量後面的代碼，你可以把它更新到：

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

這將返回選擇傳遞給jQuery的的元素。