CODEWITHSUNDEEP
javascriptjquery
lipenco
lipenco

Reputation: 1368

append element just after the one that was clicked

My eventListener doesn't work right. I would like to append an element newSlideDiv before the $( ".new-slide") which was clicked. How to make it correctly? Here is my wrong code.

Now the code appends newSlideDiv before every new slide button. 

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

Upvotes: 1

Views: 118

Answers (2)

user2399923
user2399923

Reputation: 126

You can try the following:

Assuming your HTML is something like this:

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

You can use this JS to add new elements and also give them the same behavior as the other divs:

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

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382170

Use this, which is the clicked element in the callback :

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

But as you use jQuery, you don't need to use querySelectorAll :

$('.new-slide').click(function(){
 var newSlideDiv = $('<div class="step slide"><h2>New Slide</h2></div>');
 $(this).before(newSlideDiv);      
});

Upvotes: 2

Related Questions