Databases
StackOverflow2013
Postsdbo
POjQuery click not working in ajax html response (Django)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery click not working in ajax html response (Django)
    text
    copied!<p>I have the following code:</p> <pre><code>&lt;input class="span7" type="text" id="search" name="search"&gt; &lt;div class="well" id="search-results" style="position: absolute; top: 208px; left: 62px; height: 100px; width: 340px; overflow: auto;"&gt; &lt;ul id="list-results" style="margin: 0; padding:0; top: 0;"&gt; {% include 'search-results.html' %} &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>The search-result.html is displayed via ajax, when a keyup is done in an input field. An ajax request appends into the ul an element like this:</p> <pre><code>&lt;li id="{{article.id}}"&gt;&lt;a id="result-selected" href="#"&gt;{{ article.title }}&lt;/a&gt;&lt;/li&gt; </code></pre> <p>When I use this function works (it's displaying in the console):</p> <pre><code>$('#list-results').click(function(e){ console.log($(this)); }); </code></pre> <p>When I select one of these instead, it doesn't:</p> <pre><code>$('#list-results ul') $('#list-results &gt; ul') $('#result-selected') and more... </code></pre> <p>Is this a problem that this html is rendered by ajax but it's not at the begging when the page is loaded? What can I do? I want to take the values of the displayed a to do something.</p> <p>Ajax call:</p> <pre><code>$('#search').keyup(function(){ $.ajax({ type: "POST", url:"/meal/search/", data:{ 'search_text': $('#search').val(), 'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val() }, success: searchSuccess, dataType: 'html' } ); }); function searchSuccess(data, textStatus, jqXHR){ if ($('#search').val().length &lt; 3){ $('#search-results').hide(); } else { $('#search-results').show(); } $('#list-results').html(data); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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