使用jquery从ul li获取id

Question

我正在使用一个运行良好的keyup jquery函数填充一个无序列表。但是，一旦返回信息，我想通过单击li获得id：

这是我的职责：

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>';
    }
}

它将结果放入这个html中：

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

我的javascript是

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

然而，当我点击结果时，我得到的只是列表中的第一个id，而不是我想要的id。

Answer 1

请不要在生产环境中使用这个。

1)您正在使用mysql库，这是不推荐的。使用米斯里或PDO代替。

2)你对SQL注入敞开心扉。至少，使用字符串。

3) HTML ID也必须是唯一的。

4)还需要关闭在PHP中打开的<input>标记。<input type="hidden" class="assist_id" value="'.$row['inv_id'].'"/>

但是，要回答您的问题，您可以将li's的处理程序与类assist连接起来。由于它们是动态添加的，因此需要将处理程序添加到绑定到it.You时已经存在的元素中，可以使用在……上面完成这一任务。

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

Answer 2

你可以参考这个例子：

使用children()而不是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>

然后您的jquery可能如下所示：

$(document).ready(function() {

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

});

工作演示：http://jsfiddle.net/bqv76xe8/