Jquery event is not firing on elements generated via loops

Question

I have the following code which I render through a partial that display a strength title and a strength summary

<div id="strengths" class="row">
  <% FR_STRENGTHS.each do |strength| %>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div >
        <h3 class="jobtitle text-center">  <%= strength[1]["title"] %></h3>
        <div class="text-justify strength_summary">
          <p> <%= strength[1]["summary"] %></p>
        </div>
      </div>
    </div>
  <% end %>
</div>

Details of the strengths are in yml files for translation purposes (I have the same code as above for English language pending params). I want to hide the strength summary and show it when the user hover the strength title using Jquery, but I can't have it working.

following jQuery propagation documentation I have used this js code:

$(document).ready(function() {
  $('#strengths').on("mouseenter", "h3",
    function() {
      $('.strength_summary').slideDown();
    },
    function() {
      $('.strength_summary').slideUp();
    }
  );
});

In any case I don't think using a class as a selector for the "strength_summary" would work as I assume all sections would slide down when hovering on any h3? But it's impossible to use ids so... Thanks for your help!

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Bö macht Blau, Jun 05 '17 at 16:40

score 1 · Accepted Answer · answered Jun 05 '17 at 16:30

You need to use a traversal function so you only slide slide the DIV after the current element. Also, you can't give two functions to .on(); if you want another function to run when you stop hovering, bind a mouseleave event.

$("#strengths").on({
  "mouseenter": function() {
    $(this).next(".strength_summary").slideDown();
  },
  "mouseleave": function() {
    $(this).next(".strength_summary").slideUp();
  }
}, "h3");

Jquery event is not firing on elements generated via loops

1 Answers1