CODEWITHSUNDEEP
javascriptjqueryhtml
daxter1992
daxter1992

Reputation: 478

jQuery selector does not work for one div

Why doesn't this jQuery selector work at all? Selecting another element such as $("body") or another div works fine. This same selector works in CSS

Javascript:

$(".slideshow, .slideshow figure, .slideshow figure img").hover( function() {
    stopSlideshow();
    alert("HEY"); 
  }, 
  function(){
    startSlideshow();
  });

HTML:

<div class="slideshow">
    <?php
    $counter = 1;
    foreach($images as $image)
    {
        echo "<figure>
                  <img src=\"" . $image . "\" width=\"1024\" height=\"600\"  />
                  <figcaption>ehojlhaiel;jgaelgkjnaqgjqaegaeg</figcaption>
              </figure>";
    }
    ?>
</div>

Generated HTML : https://i.sstatic.net/W3w6g.png

enter image description here

Upvotes: 1

Views: 107

Answers (2)

Mehran Hatami
Mehran Hatami

Reputation: 12961

It is all about binding the hover event at the right time, when your slideshow div is actually loaded in the DOM. To fix it you could do this instead:

$(document).on("mouseenter", ".slideshow", function(){
    //your code
});

This way you don't need to wait until your slideshow is loaded in the DOM.

The other way without using live events is to run your code once you add the slideshow to the page.

Upvotes: 1

Harman
Harman

Reputation: 1753

Try this 

jQuery("div.slideshow").hover(function() { 
  // code inside here 
});

if this div is generate dynamically then do this

  jQuery("div.slideshow").on("hover",function() { 
      // code inside here 
    });

Upvotes: 0

Related Questions