使用jQuery从UL Li获取ID

Question

I'm populating an unordered list using a keyup jquery function that works fine. However once the information is returned I would like to get the id by clicking on the li:

This is my function:

if( $_REQUEST["assist"] ) {

    $search_sql = "SELECT * FROM `inventory` WHERE upper(name) LIKE upper('%".$_REQUEST['assist']."%') and active = '1' OR upper(part_num) LIKE upper('%".$_REQUEST['assist']."%') and active = '1' ORDER BY `part_num` ASC ";
    $result = mysql_query($search_sql);

    if (mysql_num_rows($result) > 0) {
        // output data of each row
        while ($row = mysql_fetch_array($result)) {
            echo '<li class="assist"><div id="assist"><input type="hidden" class="assist_id" value="'.$row['inv_id'].'">'.$row['part_num'].' | '.$row['name'].'</div></li>';
        }
    } else {
        echo '<h2>There are no parts matching "'.$_REQUEST['assist'].'"</h2>';
    }
}

It is putting the result into this html:

 <ul id="assist-search-value"></ul>

My javascript is

 $('#assist-search-value li').click(function() {
    var option = $(this).find('.assist_id').val();
    alert(option);
});

However when i click on the results I'm getting just the first id in the list instead of the one that I would like.

Answer 1

Please don't use this in a production environment.

1) You're using the mysql PHP library, which is deprecated. Use mysqli or PDO instead.
2) You're leaving yourself open to SQL Injection . At very least, use mysql_real_escape_string .
3) HTML ID's must also be unique.
4) You also need to close the <input> tag that's opened in your PHP. <input type="hidden" class="assist_id" value="'.$row['inv_id'].'"/>

However, to answer your question - you can hook up a handler for your li's with class assist . As they're dynamically added, you need to add the handler to an element which already exists when you bind to it.You can do this using on .

$('#assist-search-value').on('click', 'li.assist', function() {
    var productId = $(this).find("input.assist_id").val();
    alert(productId);
});

Answer 2

You can refer to this one:

use children() instead of find()

<ul id="assist-search-value">
    <li class="assist"><input type="hidden" class="assist_id" value="1" />test 1</li>
    <li class="assist"><input type="hidden" class="assist_id" value="2" />test 2</li>
    <li class="assist"><input type="hidden" class="assist_id" value="3" />test 3</li>
    <li class="assist"><input type="hidden" class="assist_id" value="4" />test 4</li>
</ul>

and then your jquery may look like this:

$(document).ready(function() {

    $("ul#assist-search-value").on("click", "li.assist", function() {
        alert($(this).children("input.assist_id").val());
    });

});

working demo: http://jsfiddle.net/bqv76xe8/