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 :)

FarligOpptreden · Accepted Answer · 2011-03-11 06:38:34Z

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"));
    });
  }
});

answered Mar 11, 2011 at 6:38

FarligOpptreden

5,04324 silver badges23 bronze badges

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

1 Comment

FarligOpptreden Over a year ago

Yes. As Matthew suggested, you might try using the live() function, but I prefer assigning the event handlers explicitly after completing an AJAX call.

Clyde Lobo · Accepted Answer · 2011-03-11 06:41:04Z

1

Try

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

answered Mar 11, 2011 at 6:41

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

Comments

kpower · Accepted Answer · 2011-03-11 06:47:49Z

$('.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() { ... });

Collectives™ on Stack Overflow

Jquery selecting li element

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related