Databases
StackOverflow2013
Postsdbo
POjQuery is not catching click on some content loaded
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery is not catching click on some content loaded
    primarykey
    data
    text
    <p>I'm using jQuery 1.7.2 with Zoomy and jmpress plugins. Also I'm using boilerplate+bootstrap downloaded from initializr.com</p> <p>I'm trying to create a "game" like [Waldo/Wally] when you have to find some character in a photo. Each photo has a different character to find.</p> <p>I'm using jmpress as a presentation plugin to go from one photo to another every time the character is found. jmpress loads the content trough ajax (and I need that behavior) because I want a pretty fast load of the web.</p> <p><strong>Problem:</strong> The .on("click") event is not being caught on one of the elements that exist inside the content loaded.</p> <p>As an example, I'll explain my problem with one of this characters (just taking parts of code).</p> <p>I have in my index.html some divs to load the characters, I'll take the nurse character:</p> <pre><code>&lt;div id="nurse" class="step container" data-src="women/nurse.html" data-x="7500"&gt; Loading... &lt;/div&gt; </code></pre> <p>The jmpress load the data-src (women/nurse.html) trough ajax when the user is near to that div (step). It loads great.</p> <p>This is the code of nurse.html</p> <pre><code>&lt;script type="text/javascript"&gt; new Image().src = "img/nurse_big.jpg"; &lt;/script&gt; &lt;div class="descripcion"&gt; &lt;p&gt;Bla, bla, bla.&lt;/p&gt; &lt;/div&gt; &lt;div class="imagen"&gt; &lt;a href="img/nurse_big.jpg" class="zoom"&gt; &lt;img src="img/nurse.jpg" alt="Find the nurse" /&gt; &lt;/a&gt; &lt;/div&gt; </code></pre> <p>As you can see, I have two divs loaded inside the #nurse div (that has .step class).</p> <p>I have this code on my js/script.js file when I try to catch the click event:</p> <pre><code>$(".step").on("click", function(event){ console.log(event.target); }); </code></pre> <p>I'm also trying with "body" tag to see what happens</p> <pre><code>$("body").on("click", function(event){ console.log(event.target); }); </code></pre> <p>If you check the console while the message is showing (div.descripcion) it catch the event and print. But, after the div.descripcion is removed and the image appears, it dosen't. Like if that div.imagen or even elements inside it dosen't exist. The click event is not catched. I tried to catch mousemove event and It does.</p> <p>Why is not catching the click? any idea?</p> <p>You can see a <em>working version</em>: [Removed]</p> <p>And the <em>not working version</em>: [Removed]</p> <p><strong>UPDATE:</strong> I forgot, if I use .on("click") it dosen't work. But if I use .on("mousemove") for example, it works. That's the weird part. .on() is working, but not for the click event.</p> <p><strong>UPDATE 2:</strong> I have removed the links of the live examples because they where dev versions. I'll publish the link to the final work when is published. Thanks to all of you for taking the time. Specially to @Esailija that gives me the answer.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USYaazkal
    1. USYaazkal
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery is not catching click on some content loaded
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjQuery is not catching click on some content loaded
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POjQuery is not catching click on some content loaded
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COpossible duplicate of [jQuery - Click event doesn't work on dynamically generated elements](http://stackoverflow.com/questions/6658752/jquery-click-event-doesnt-work-on-dynamically-generated-elements)
      singulars
      1. POjQuery is not catching click on some content loaded
      1. USEsailija
    2. COok that one uses live... but there are over 9000 duplicates of this posted daily
      singulars
      1. POjQuery is not catching click on some content loaded
      1. USEsailija
    3. COAlso viewed some "duplicates" on this site, but my problem was not solved and I think that the issue that I wrote is very different. Please see that I'm using .on() event that is the correct.
      singulars
      1. POjQuery is not catching click on some content loaded
      1. USYaazkal
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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