Jquery on（“click”）不工作

时间：2016-06-13 03:50:40

标签： jquery click

我一直在研究一个简单的滑块我试图调用滑块“类”的一些方法，点击我动态添加的元素，它不起作用。我甚至无法让点击工作......我做错了什么!!!! 任何帮助将不胜感激。我确定我只是在忽略一些事情。

(function($) {
  var Slide = function(element, options) {
    element = (typeof element == 'object') ? element : $(element);
    options = {
      easing: options.easing || "easeOut",
      speed: options.speed || 500,
      transition: options.transition || "slide",
      width: options.width || 500,
      height: options.height || 500,
      next: options.next || ">",
      prev: options.prev || "<"
    };
    var slider = {
      wrap: $("<div/>"),
      imgs: [],
      transition: options.transition || "slide",
      current: 0,
      controls: $("<div class='controls'/>"),
      next_control: $("<button class='prev_control control'>" + options.next + "</button"),
      prev_control: $("<button class='next_control control'>" + options.prev + "</button>"),
      speed: options.speed || 500,
      init: function() {
        var sd = this;
        $(this.controls).append(this.next_control);
        $(this.controls).append(this.prev_control);

        //CODE IN QUESTION

        this.next_control.on("click", function() {
          sd.next();
        });

        this.prev_control.on("click", function() {
          sd.previous();
        });

        //END IN QUESTION
        $(element).append(this.controls);
        this.wrap.html($(element).html());
        $(this.wrap).css("margin-left", 0);
        this.imgs = $(this.wrap).find("img");
        $(this.imgs).css({
          width: options.width,
          height: options.height,
          float: "left"
        });
        this.wrap.css({
          width: (options.width * this.imgs.length) + "px",
          height: options.height + "px"
        });
        $(element).html("").append(this.wrap);
        $(element).css({
          width: options.width,
          height: options.height,
          overflow: "hidden",
          position: "relative"
        })
      },
      next: function(_callback) {
        _callback = _callback || function() {};
        this.current = (this.current == this.imgs.length - 1) ? 0 : this.current + 1;
        $(this.wrap).animate({
          "marginLeft": "-" + (this.current * options.width) + "px"
        }, options.speed);
      },
      previous: function(_callback) {
        _callback = _callback || function() {};
        this.current = (this.current == 0) ? this.imgs.length - 1 : this.current - 1;
        $(this.wrap).animate({
          "marginLeft": "-" + (this.current * options.width) + "px"
        }, options.speed);
      }
    }
    $(window).on("keydown", function(e) {
      switch (e.which) {
        case 39:
          slider.next();
          break;
        case 37:
          slider.previous();
          break
      }
    });
    slider.init();
    return slider;
  }
  window.Slide = Slide;
})(jQuery);
var slider = new Slide("#slide_show", {
  width: 500,
  height: 500,
  speed: 1000,
  ease: "easeInOut"
});
.controls {
  position: absolute;
  right: 0px;
  margin-top: 50%;
  transform: translateY(-50%);
}
.control {
  height: 60px;
  width: 40px;
  display: block;
  margin: 5px 0px;
  color: white;
  font-size: 30px;
  border: none;
}
.next_control {
  background: rgba(0, 0, 100, 0.4);
}
.prev_control {
  background: rgba(124, 124, 124, 0.8);
}
.control:hover {
  background: white;
  color: rgba(0, 0, 0, 0.7);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide_show">
  <img src="http://dogtowndogtraining.com/wp-content/uploads/2012/06/300x300-061-e1340955308953.jpg" />
  <img src="http://siliconangle.com/files/2013/10/chrome-hacked-story-300x300.jpg" />
  <img src="http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png" />
</div>

2 个答案:

答案 0 :(得分：1)

问题是this.wrap.html($(element).html());创建了一个新的dom元素集，而不是你添加了点击处理程序的元素集

(function($) {
  var Slide = function(element, options) {
    element = (typeof element == 'object') ? element : $(element);
    options = {
      easing: options.easing || "easeOut",
      speed: options.speed || 500,
      transition: options.transition || "slide",
      width: options.width || 500,
      height: options.height || 500,
      next: options.next || ">",
      prev: options.prev || "<"
    };
    var slider = {
      wrap: $("<div/>"),
      imgs: [],
      transition: options.transition || "slide",
      current: 0,
      controls: $("<div class='controls'/>"),
      next_control: $("<button class='prev_control control'>" + options.next + "</button"),
      prev_control: $("<button class='next_control control'>" + options.prev + "</button>"),
      speed: options.speed || 500,
      init: function() {
        var sd = this;
        $(this.controls).append(this.next_control);
        $(this.controls).append(this.prev_control);

        //CODE IN QUESTION

        this.next_control.on("click", function() {
          sd.next();
        });

        this.prev_control.on("click", function() {
          sd.previous();
        });

        //END IN QUESTION
        $(element).append(this.controls);


        this.wrap.empty().append(element.contents());
        $(this.wrap).css("margin-left", 0);
        this.imgs = $(this.wrap).find("img");
        $(this.imgs).css({
          width: options.width,
          height: options.height,
          float: "left"
        });
        this.wrap.css({
          width: (options.width * this.imgs.length) + "px",
          height: options.height + "px"
        });
        $(element).html("").append(this.wrap);
        $(element).css({
          width: options.width,
          height: options.height,
          overflow: "hidden",
          position: "relative"
        })
      },
      next: function(_callback) {
        _callback = _callback || function() {};
        this.current = (this.current == this.imgs.length - 1) ? 0 : this.current + 1;
        $(this.wrap).animate({
          "marginLeft": "-" + (this.current * options.width) + "px"
        }, options.speed);
      },
      previous: function(_callback) {
        _callback = _callback || function() {};
        this.current = (this.current == 0) ? this.imgs.length - 1 : this.current - 1;
        $(this.wrap).animate({
          "marginLeft": "-" + (this.current * options.width) + "px"
        }, options.speed);
      }
    }
    $(window).on("keydown", function(e) {
      switch (e.which) {
        case 39:
          slider.next();
          break;
        case 37:
          slider.previous();
          break
      }
    });
    slider.init();
    return slider;
  }
  window.Slide = Slide;
})(jQuery);
var slider = new Slide("#slide_show", {
  width: 500,
  height: 500,
  speed: 1000,
  ease: "easeInOut"
});
.controls {
  position: absolute;
  right: 0px;
  margin-top: 50%;
  transform: translateY(-50%);
}
.control {
  height: 60px;
  width: 40px;
  display: block;
  margin: 5px 0px;
  color: white;
  font-size: 30px;
  border: none;
}
.next_control {
  background: rgba(0, 0, 100, 0.4);
}
.prev_control {
  background: rgba(124, 124, 124, 0.8);
}
.control:hover {
  background: white;
  color: rgba(0, 0, 0, 0.7);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide_show">
  <img src="http://dogtowndogtraining.com/wp-content/uploads/2012/06/300x300-061-e1340955308953.jpg" />
  <img src="http://siliconangle.com/files/2013/10/chrome-hacked-story-300x300.jpg" />
  <img src="http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png" />
</div>

答案 1 :(得分：0)

您可能需要调用element上的点击并委托控件。您可以通过向.on()方法添加一些上下文来完成此操作。

//CODE IN QUESTION

$(element).on("click", '.next_control', function(evt) {
    sd.next();
});

$(element).on("click", '.prev_control', function() {
    sd.previous();
});

//END IN QUESTION
相关问题
最新问题