Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Is this what you're trying to do? Note, I'm putting the <code>$.on()</code> on the parent, but selecting the <code>.button</code> for the action.</p> <blockquote> <p>.on( events <strong>[, selector]</strong> [, data], handler(eventObject) )</p> <p><strong>selector</strong> A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.</p> </blockquote> <p><a href="http://api.jquery.com/on/" rel="nofollow">http://api.jquery.com/on/</a></p> <pre><code>&lt;div id="stuff"&gt; &lt;button class="button"&gt;Click me!&lt;/button&gt; &lt;p&gt;Stuff&lt;/p&gt; &lt;/div&gt; var $stuff = $('#stuff'), ajaxContent = $stuff.html(); $stuff.on('click', '.button', function(){ $.get('/echo/html/', function(){ $stuff.empty(); console.log($stuff.html()); alert($stuff.html()); // Look behind, #stuff is empty. $stuff.html(ajaxContent); console.log($stuff.html()); }); }); </code></pre> <p><a href="http://jsfiddle.net/62uSU/1" rel="nofollow">http://jsfiddle.net/62uSU/1</a></p> <p>Another demonstration:</p> <pre><code>var $stuff = $('#stuff'), ajaxContent = $stuff.html(), $ajaxContent, colors = ['blue','green','red'], color = 0; $stuff.on('click', '.button', function(){ $.get('/echo/html/', function(){ color++; if (color == colors.length) color = 0; console.log($stuff.html()); alert($stuff.html()); $ajaxContent = $(ajaxContent); $stuff.append($ajaxContent).css('color', colors[color]); console.log($stuff.html()); }); }); </code></pre> <p><a href="http://jsfiddle.net/62uSU/2/" rel="nofollow">http://jsfiddle.net/62uSU/2/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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