在被點擊的元素後面追加元素

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) 
}