1

我的 eventListener 不能正常工作。我想在单击newSlideDiv之前附加一个元素。$( ".new-slide")如何正确制作？这是我的错误代码。

现在代码附加newSlideDiv在每个新的滑动按钮之前。

  var newSlideButton = document.querySelectorAll('.new-slide');
    for (var i = 0; i < newSlideButton.length; i++) { 
        newSlideButton[i].addEventListener('click', function(){
        newSlide(); }, false )
    }
   var newSlide = function() {
        var newSlideDiv = $('<div class="step slide">
         <h2>New Slide</h2></div>');
        $( ".new-slide").before(newSlideDiv);      
    }
4

2 回答 2

2

使用this，这是回调中的单击元素：

var newSlideButton = document.querySelectorAll('.new-slide');
for (var i = 0; i < newSlideButton.length; i++) { 
    newSlideButton[i].addEventListener('click', newSlide, false )
}
var newSlide = function() {
    var newSlideDiv = $('<div class="step slide">
     <h2>New Slide</h2></div>');
    $(this).before(newSlideDiv);      
}

但是当你使用 jQuery 时，你不需要使用querySelectorAll：

$('.new-slide').click(function(){
 var newSlideDiv = $('<div class="step slide"><h2>New Slide</h2></div>');
 $(this).before(newSlideDiv);      
});
于 2013-09-16T17:26:35.800 回答
0

您可以尝试以下方法：

假设您的 HTML 是这样的：

  <div class="step slide new-slide">
  <h2>New Slide 1</h2>
  </div>
  <div class="step slide new-slide">
  <h2>New Slide 2</h2>
  </div>

您可以使用此 JS 添加新元素，并赋予它们与其他 div 相同的行为：

var counter = 3; //Use to distinguish new added DIVs
var newSlide = function(e) {
    //Create the elem to insert
    var newSlideDiv = $('<div class="step slide"><h2 class="new-slide">New Slide '+ counter+'</h2></div>');
    counter++;
    //Insert it before the clicked element
    $(e.target).before(newSlideDiv);
    //Add the listener to have the same behavior
    $(newSlideDiv).addEventListener('click',function(e) { newSlide(e);}, false );

    }

//Initialize the DIV elems in the HTML with the listener    
var newSlideButton = $('.new-slide');
for (var i = 0; i < newSlideButton.length; i++) { 
    newSlideButton[i].addEventListener('click',function(e) { newSlide(e);}, false )
}
于 2013-09-16T17:54:42.813 回答