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

来自jQuery的文档：http://api.jquery.com/on/

选择

类型：字符串   一个选择器字符串，用于过滤触发事件的所选元素的后代。如果选择器为null或省略，则事件始终在到达所选元素时触发。

您正在传递对返回的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的选择器。

Answer 2

即使尝试以这种方式使用它也没有意义。

如果您想将事件绑定到您已经拥有的元素（并且甚至不需要委托），那么您应该首先使用$slider_next_btn.on("click", handlerFunction)（在这种情况下不使用选择器）

jQuery on（）变量作为选择器问题

2 个答案: