Question

我的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);      
    }

Answer 1

使用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);      
});

Answer 2

您可以尝试以下操作：

假设你的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 )
}

在单击的元素之后附加元素

2 个答案: