How can you re-render a page from JavaScript/jQuery?

Question

I am not quite sure if that's the correct way to phrase it, but here is my problem

As you can see, pretty simple code:

<div class="first"></div>
<div></div>

What I want to achieve is:

1. You click on the div with the first class, it will swap that class with the sibling element
2. You click the sibling element, and it swaps it back, so you just swap classes around 2 elements

The problem here is it works correctly only the first time, and the second time when the new element receives the class via addClass , jQuery doesn't recognize that it contains the class by the first page load? How can I resolve this?

PS: I made a console.log(111); just to make sure, and sure enough it triggers ONLY when I click on the black div after the first swap (the one that SHOULD NOT have the first class anymore)

Answer 1

To achieve this behavior, you can use delegated events http://api.jquery.com/delegate/ on elements wrapper;

$(document).delegate('.first', 'click', function(e){
    e.preventDefault();
    console.log(123);
    $(this).removeClass('first');
   $(this).siblings().addClass('first');
})

Answer 2

A quick and simple way to do it is this:

 $(document).ready(function() { var first = $('.first'); var second = first.next(); first.click(function(e) { e.preventDefault(); first.removeClass('first'); second.addClass('first'); }); second.click(function(e) { e.preventDefault(); second.removeClass('first'); first.addClass('first'); }); }); 

 div { background-color: black; height: 100px; width: 100px; margin-bottom: 10px; } .first { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first"></div> <div></div> 

This way does not scale well.

Your problem was you only change when you click the $(first) which does not change when clicked it's still point to the first div.

A better way with vanilla javascript:

 document.addEventListener('click', function(e) { if (e.target.classList.contains('first')) { e.target.classList.remove('first') var sibling = getNextSibling(e.target) || getPreviousSibling(e.target) if (sibling) { sibling.classList.add('first') } } }) function getNextSibling(elem) { var sibling = elem.nextSibling while(sibling && sibling.nodeType != 1) { sibling = sibling.nextSibling } return sibling } function getPreviousSibling(elem) { var sibling = elem.previousSibling while(sibling && sibling.nodeType != 1) { sibling = sibling.previousSibling } return sibling } 

Answer 3

All you need to do is push both items into an array, then flip between indexes on click.

 var elems = []; $(document).on("click", ".first", function(event) { elems = elems.length == 0 ? [event.originalEvent.target, $(event.originalEvent.target).next()] : elems; $(elems[event.originalEvent.target === elems[0] ? 1 : 0]).addClass("first"); $(elems[event.originalEvent.target === elems[0] ? 0 : 1]).removeClass("first"); }); 

 .first { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first">x</div> <div>y</div>