Jquery .click() 不适用于 livesearch
Jquery .click() not working with livesearch
我实现了基于输入表单中的字符串的实时搜索。
结果以这种方式正确显示:
<input type="text" class="form-control" name="search_client" id="search_client" required autocomplete="off">
<ul id="results_client" class="liveresults">
<li class="liveresult">
<h5 class="result_name" data-value="Joo Fogn"><i class="fa fa-user fa-fw"></i> Joo Fogn</h5>
</li>
<li class="liveresult">
<h5 class="result_name" data-value="Peter Nash"><i class="fa fa-user fa-fw"></i> Peter Nash</h5>
</li>
</ul>
但是,当用户点击其中一个可能的结果时,我想使用显示的结果自动完成输入。
为了做到这一点,我虽然拦截了对结果的点击,并将结果值赋给了输入,如下:
$(".result_name").click(function(){
$("#search_client").val($(".result_name").data("value"));
});
但是当我点击一个结果时,没有任何反应。我该如何解决?
试试这个:您可以使用 .on()
绑定点击事件并使用 $(this)
获取点击元素 jQuery 实例以读取其数据值。
$(document).on("click",".result_name",function(){
//use $(this) to get clicked element and read its value
$("#search_client").val($(this).data("value"));
});
看这个例子:http://jsfiddle.net/kevalbhatt18/g393kqgd/1/
$(".result_name").click(function(){
$("#search_client").val($(this).data("value"));
});
我实现了基于输入表单中的字符串的实时搜索。 结果以这种方式正确显示:
<input type="text" class="form-control" name="search_client" id="search_client" required autocomplete="off">
<ul id="results_client" class="liveresults">
<li class="liveresult">
<h5 class="result_name" data-value="Joo Fogn"><i class="fa fa-user fa-fw"></i> Joo Fogn</h5>
</li>
<li class="liveresult">
<h5 class="result_name" data-value="Peter Nash"><i class="fa fa-user fa-fw"></i> Peter Nash</h5>
</li>
</ul>
但是,当用户点击其中一个可能的结果时,我想使用显示的结果自动完成输入。
为了做到这一点,我虽然拦截了对结果的点击,并将结果值赋给了输入,如下:
$(".result_name").click(function(){
$("#search_client").val($(".result_name").data("value"));
});
但是当我点击一个结果时,没有任何反应。我该如何解决?
试试这个:您可以使用 .on()
绑定点击事件并使用 $(this)
获取点击元素 jQuery 实例以读取其数据值。
$(document).on("click",".result_name",function(){
//use $(this) to get clicked element and read its value
$("#search_client").val($(this).data("value"));
});
看这个例子:http://jsfiddle.net/kevalbhatt18/g393kqgd/1/
$(".result_name").click(function(){
$("#search_client").val($(this).data("value"));
});