добавить элемент сразу после щелчка

Question

My 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 для добавления новых элементов, а также дать им такое же поведение, как и другие дивы:.

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