在被点击的元素后面追加元素

Question

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

现在代码在每个新幻灯片按钮之前附加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) 
}