Jquery selecting li element

Question

Having an issue with a listitem, when I click the desired li, it doesnt do anything. I for now, will just get it to alert, so i can see it will do the function after ive established that I can get a response from it.

Jquery

$('.propid').click(function(){
        alert($(this).find().attr('id'));
    });

HTML

    <div>
    <form class='cform'>
      <div>
        Type in Property:
        <br />

        <input class="ui-corner-all" type="text" size="30" value="" id="inputString"  />

      </div>
      <div class="suggestionsBox" id="suggestions" style="display: none;">
        <div class="suggestionList" id="autoSuggestionsList">
          &nbsp;
        </div>
      </div>
    </form>
  </div>

On typing something suggestionsBox will show and populate with ajax results.

The returned html/php is appended to the SuggestionxBox:

'<li class="propid" id="'.$result['roomnumber'].'">'.$result['name'].'</li>';

Not sure why it doesn't alert when I click on an li element inside suggestionBox but if i use

$('.suggestionBox').click(function(){
    alert($(this).find(li:first).attr('id'));
});

awesome answers everyone, but ive got with assigning an onclick event in html :)

Answer 1

Remember to assign the onclick events AFTER the AJAX call is completed. Just popping that script onto the page when it loads won't ensure that all future / late loaded elements will also get the event handlers attached.

Simple example:

$.ajax({
  type: "POST",
  url: "URL",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  data: "{'PARAM':'VALUE'}",
  success: function (result) {
    $("#autoSuggestionsList").append(result.d);
    $(".propid").click(function(){
        alert($(this).find().attr("id"));
    });
  }
});

Answer 2

Try

$('.propid').live("click",function(){
        alert($(this).find().attr('id'));
    });

Answer 3

$('.propid').click(function(){ ... }); will search for elements with "propid" class on your page and bind click events for them. But if some elements will appear after this binding was made - they won't work (no binding will be made for them).

There are three ways here.

First - is to make binding after each new element was created. Something like: $('.propid').unbind('.my_propid').bind('click.my_propid', function() { ... }) after each ajax call (I've used namespaces to avoid binding twice).

Second - is to make binding for parent element. A javascript event can be passed as argument to your binding function - so you can get event's target and determine - which child element was really clicked. $('. suggestionsBox').click(function (e) { /* work with event e */ }); (http://feedproxy.google.com/~r/Bludice/~3/q0r9715M_JA/event-delegate - you can read more about event delegation in js here).

Third - is to dynamically control new elements (with live). $('.propid').live('click', function() { ... });