My click function only works for the first part of the jquery and not the second. Why won't it let me click the newer left image when it's in place

Question

I am creating a image carousel where the other images hover behind the focused one. As you can see in my fiddle the click event works when you click the first image to the left, but not for the next image that appears there. Any inclination as to what I'm doing wrong?

I am new to jquery and I'm sure there is an easier way to do this but I'm trying to figure it out and I am getting stumped every time. Here is my fiddle... https://jsfiddle.net/hexen77/9xoqLgzs/16/

<div>
  <img id="content-1" class="position-1" src="https://www.gstatic.com/webp/gallery/1.sm.jpg">
  <img id="content-2" class="position-2" src="https://www.gstatic.com/webp/gallery/2.sm.jpg">
  <img id="content-3" class="position-3" src="https://www.gstatic.com/webp/gallery/3.sm.jpg">
  <img id="content-4" class="position-4" src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
</div> 

.position-1 {
    position: absolute;
    left: 30%;
    transform: scale(1.1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.position-2 {
    opacity: .4;
    position: absolute;
    z-index: -2;
    left: 10%;
}
.position-3 {
    opacity: .4;
    right: 10%;
    position: absolute;
    z-index: -2;
}
.position-4 {
    opacity: 0;
    z-index: -10;
    left: 30%;
    position: absolute;
}

$("#content-2.position-2").click(function() {
  $("#content-2.position-2").addClass(" position-1");
    $("#content-2.position-2").removeClass("position-2 ");
    $("#content-3.position-3").addClass(" position-4");
    $("#content-3.position-3").removeClass("position-3 ");
    $("#content-4.position-4").addClass(" position-2");
    $("#content-4.position-4").removeClass("position-4 ");
    $("#content-1.position-1").addClass(" position-3");
    $("#content-1.position-1").removeClass("position-1 ")
});
$("#content-4.position-2").click(function() {
  $("#content-4.position-2").addClass(" position-1");
    $("#content-4.position-2").removeClass("position-2 ");
    $("#content-2.position-1").addClass(" position-3");
    $("#content-2.position-1").removeClass("position-1 ");
    $("#content-1.position-3").addClass(" position-4");
    $("#content-1.position-3").removeClass("position-3 ");
    $("#content-3.position-4").addClass(" position-2");
    $("#content-3.position-4").removeClass("position-4 ")
});

When your code first runs, it looks for an element `#content-4.position-2` and attaches a `click` event to it. However, you don't have any `#content-4.position-2` elements at that time, so it attaches *nothing*. The code to attach that event is never called again. Instead of going that route, use *Event Delegation*. Possible duplicate of [Direct vs. Delegated - jQuery .on()](https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on) and [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Tyler Roper, Jan 30 '19 at 21:33
Similarly, once you attach the click event, it is never removed, regardless of what classes you add or remove. — Tyler Roper, Jan 30 '19 at 21:36

score 0 · Answer 1 · answered Jan 30 '19 at 21:34

You need to bind the event to the document because you are changing the classes.

$(document).on("click","#content-2.position-2", function() {
  $("#content-2.position-2").addClass(" position-1");
    $("#content-2.position-2").removeClass("position-2 ");
    $("#content-3.position-3").addClass(" position-4");
    $("#content-3.position-3").removeClass("position-3 ");
    $("#content-4.position-4").addClass(" position-2");
    $("#content-4.position-4").removeClass("position-4 ");
    $("#content-1.position-1").addClass(" position-3");
    $("#content-1.position-1").removeClass("position-1 ")
});
$(document).on("click","#content-4.position-2",function() {
  $("#content-4.position-2").addClass(" position-1");
    $("#content-4.position-2").removeClass("position-2 ");
    $("#content-2.position-1").addClass(" position-3");
    $("#content-2.position-1").removeClass("position-1 ");
    $("#content-1.position-3").addClass(" position-4");
    $("#content-1.position-3").removeClass("position-3 ");
    $("#content-3.position-4").addClass(" position-2");
    $("#content-3.position-4").removeClass("position-4 ")
});

Here is a working Fiddle

My click function only works for the first part of the jquery and not the second. Why won't it let me click the newer left image when it's in place

1 Answers1