jQuery click not working in ajax html response (Django)

Question

I have the following code:

<input class="span7" type="text" id="search" name="search">
<div class="well" id="search-results" style="position: absolute;
          top: 208px;
          left: 62px;
          height: 100px;
          width: 340px;
          overflow:
          auto;">
    <ul id="list-results" style="margin: 0; padding:0; top: 0;">
    {% include 'search-results.html' %}
    </ul>
</div>

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:

<li id="{{article.id}}"><a id="result-selected" href="#">{{ article.title }}</a></li>

When I use this function works (it's displaying in the console):

$('#list-results').click(function(e){
      console.log($(this));
  });

When I select one of these instead, it doesn't:

$('#list-results ul')
$('#list-results > ul')
$('#result-selected')
and more...

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.

Ajax call:

$('#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 < 3){
        $('#search-results').hide();
      } else {
        $('#search-results').show();
      }

      $('#list-results').html(data);

  }

You can't get something that isn't there. If the elements aren't inserted yet, but will be added with ajax later, there is no way to get values or text until they are actually there. — adeneo
– adeneo, Commented Jul 16, 2013 at 5:50
It's not working even when a long list sent via ajax are in the html. I can selected with firebug. I do a query in the input text, it's matching something so a list is displayed, then I click one of the items. — user1846407
– user1846407, Commented Jul 16, 2013 at 5:52
Where is the ajax call? It would be better if we could see it. — Nafiul Islam
– Nafiul Islam, Commented Jul 16, 2013 at 6:02
Either you're using the same ID multiple times, or you're trying to send the value of an element to the serverside, and then get the element which value you're trying to send in the same ajax call. The logic escapes me ? — adeneo
– adeneo, Commented Jul 16, 2013 at 6:15
I get the value of #search and send it to the serverside. It response with html with the items that matched the text. Then the user selects one of this item and use it in other form (This is not implemented yet). Sorry if I'm clear enough. — user1846407
– user1846407, Commented Jul 16, 2013 at 6:34

user710907 · Accepted Answer · 2013-07-16 06:41:34Z

1

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+

answered Jul 16, 2013 at 6:41

user710907

7725 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Reddy · Accepted Answer · 2013-07-16 06:16:19Z

1

When you are working with dynamic click function use

on('click', function ..) or live('click', function())

Change your function to live click

$('#list-results ul').live('click', function(e){
  console.log($(this));
});

edited Jul 16, 2013 at 6:16

answered Jul 16, 2013 at 5:57

Reddy

363 bronze badges

1 Comment

user1846407 Over a year ago

Neither of them works. The live has a TypeError: $(...).live is not a function

ʞɹᴉʞ ǝʌɐp · Accepted Answer · 2013-07-16 08:49:22Z

0

Try using 'live' handler http://api.jquery.com/live/

$('#list-results ul li').on('click', function(e){
  console.log($(this));
});

Above function will trigger when ever you click on li element within list-results div.

edited Jul 16, 2013 at 8:49

answered Jul 16, 2013 at 6:07

ʞɹᴉʞ ǝʌɐp

5,7108 gold badges44 silver badges65 bronze badges

3 Comments

ʞɹᴉʞ ǝʌɐp Over a year ago

Let me know if this is what you wanted.

user1846407 Over a year ago

TypeError: $(...).live is not a function, isn't depreciated?

ʞɹᴉʞ ǝʌɐp Over a year ago

Oh yes, I have changed my function now it uses 'on'. Old habits die hard. Thanks for pointing out.

user1846407 · Accepted Answer · 2013-07-16 17:13:55Z

0

I found a solution here:

http://forum.jquery.com/topic/live-is-deprecated-but-on-doesn-t-work-on-not-existent-markup

You have to first select the parent and then the yet-not-there element.

$('#list-results').on( 'click', '#result-selected', function(){
    console.log($(this));
    console.log($(this).html());
  });

edited Jul 16, 2013 at 17:13

answered Jul 16, 2013 at 6:42

user1846407

1091 silver badge11 bronze badges

Collectives™ on Stack Overflow

jQuery click not working in ajax html response (Django)

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related