Note that there are some explanatory texts on larger screens.

plurals
  1. POError in ".on" function in jquery
    text
    copied!<p>I have the following html file :</p> <pre><code>&lt;div id="tour"&gt; &lt;h2&gt;Paris, France Tour&lt;/h2&gt; &lt;p&gt;$2,499 for 7 Nights&lt;/p&gt; &lt;button&gt;See photos from our last tour&lt;/button&gt; &lt;ul class="photos"&gt; &lt;li&gt; &lt;img src="/assets/photos/paris1.jpg"&gt; &lt;span&gt;Arc de Triomphe&lt;/span&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="/assets/photos/paris2.jpg"&gt; &lt;span&gt;The Eiffel Tower&lt;/span&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="/assets/photos/paris3.jpg"&gt; &lt;span&gt;Notre Dame de Paris&lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>This is my jQuery code :</p> <pre><code>function showPhotos() { $(this).find("span").slideToggle(); } $(document).ready(function() { $("#tour").on("click", "button", function() { $(".photos").slideToggle(); }); $(".photos").on("mouseenter", "li", showPhotos); $('.photos').on("mouseleave", "li", showPhotos); }); </code></pre> <p>This code works, it shows the span when mouse enters the img element . But when I try to do the same thing like so :</p> <pre><code>function showPhotos() { $(this).find("span").slideToggle(); } $(document).ready(function() { $("#tour").on("click", "button", function() { $(".photos").slideToggle(); }); $(".photos").on("mouseenter", "li", function() { showPhotos(); }); $('.photos').on("mouseleave", "li", function() { showPhotos(); }); }); </code></pre> <p>It doesn't work . With my limited knowledge, both codes seem to be doing the same thing. Please help me, How is the second code different from the first ? </p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload