jquery .click function not getting triggered

Question

I have the following HTML and Javascript code. I am trying to make a search suggestion system. The list-items in the unordered-list 'search_suggest' are retrieved dynamically using ajax as the user types in the input box 'site_search' and inserted.

<form name="search_site_form" method="get" action="search.php">
        <input id="site_search" name="q" class="search_input input" autocomplete="off" value="Search the site" type="text"/>

    <ul id="search_suggest">
    </ul>
    <input value=" " type="submit" class="search_submit"/>
    <script type="text/javascript">
    <!--
        $("ul#search_suggest>li").click(function(){ 
        alert('123');
    });
    //-->
    </script>
</form>

Clicking on the list items in search_suggest however is not triggering the click function. Any idea why?

Oded · Accepted Answer · 2010-12-31 16:13:10Z

6

You need to bind the click event to the list items after they have been added to the page.

Before any list items get added to the page, the expression $("ul#search_suggest>li") finds nothing, so no elements get bound to the click event.

You need to use .live that will:

Attach a handler to the event for all elements which match the current selector, now and in the future

Like the following:

<script type="text/javascript">
<!--
    $("ul#search_suggest>li").live('click', function(){ 
    alert('123');
});
//-->

answered Dec 31, 2010 at 16:13

Oded

501k102 gold badges900 silver badges1k bronze badges

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

Comments

Jeff Fohl · Accepted Answer · 2010-12-31 16:16:23Z

1

Your script is running once, binding the onclick action to non-existent <li> elements. You will need to build into your AJAX script something that will add the onclick to each <li> element as they are added to the DOM.

answered Dec 31, 2010 at 16:16

Jeff Fohl

2,0863 gold badges24 silver badges26 bronze badges

Comments

Teej · Accepted Answer · 2010-12-31 16:14:30Z

0

use the jQuery.live();

 <script type="text/javascript">
    <!--
        $("ul#search_suggest>li").live('click', function(){ 
        alert('123');
    });
    //-->
    </script>

answered Dec 31, 2010 at 16:14

Teej

12.9k9 gold badges76 silver badges94 bronze badges

Comments

codeandcloud · Accepted Answer · 2010-12-31 16:26:00Z

0

Use

$("ul#search_suggest+input").click(function(){ 
        alert('123');
    });

Here the input tag is the next sibling of an ul with id earch_suggest
+ is the jQuery Next Sibling Selector

The selector "ul#search_suggest>li" means find the li which is the child of the ul with id search suggest.
> is the jQuery Child Selector

edited Dec 31, 2010 at 16:26

answered Dec 31, 2010 at 16:17

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

Comments

Arasu · Accepted Answer · 2010-12-31 16:48:05Z

0

Add empty li or li with values into and test it like this <ul id="search_suggest"> <li></li> </ul>

answered Dec 31, 2010 at 16:48

Arasu

2,1486 gold badges40 silver badges67 bronze badges

Collectives™ on Stack Overflow

jquery .click function not getting triggered

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related