我正在使用jQuery自动完成功能。在我的情况下,我的页面上有多个自动完成功能文本框和隐藏字段。
例如
<input class='myclass' type='text'> </input>
<input class='.emp_num_hidden' type='hidden'> </input>
<input class='myclass' type='text'> </input>
<input class='.emp_num_hidden' type='hidden'> </input>
等等...
因此,当我在隐藏字段上触发更改事件时,它将引发多次
下面是我的代码:
$(".myclass").each(function() {
var $empName= $(this);
var $empNumber = $empName.next('input:hidden');
//things to do
//Setting variable e.g url...
$empName.autocomplete(url,{
//code...
}).result(function(event,data,formatted)
{
$empNumber.val(formatted).change();
});
});
在上面的代码中,$ empNumber保存一个隐藏字段,该字段用于存储自动完成值,即在这种情况下
我们从自动填充中选择任何文本,则所选员工编号将存储在隐藏字段中。
基于此隐藏字段值,我想执行ajax调用,该调用将根据员工的返回详细信息
员工编号。
因此,我写了hanldler来更改隐藏字段的事件,如下所示。
$(.emp_num_hidden).on('change',function (
)};
这里的“ emp_num_hidden”是隐藏字段的类。
请提出如何防止隐藏字段更改发生多个事件的建议。
最佳答案
这是使用$(this)
对象完成的。由于change
事件具有目标,因此它将仅影响一个元素。正在对此元素this
执行回调函数。例如:
$(".emp_num_hidden").on('change', function (e){
alert($(this).val());
});
将会发生的是,当更改隐藏字段时,将显示一个警报窗口,其中仅包含该隐藏字段中的员工编号。您还将注意到对您的代码进行了一些修复。
就个人而言,我将同时使用对象的
id
和class
属性。这为您的选择器提供了广泛的范围和狭窄的范围。例:
的HTML
<input class='myclass' type='text' id='entry-txt-1' />
<input class='emp_num_hidden' type='hidden' id='hide-txt-1' />
<input class='myclass' type='text' id='entry-txt-2' />
<input class='emp_num_hidden' type='hidden' id='hide-txt-2' />
jQuery的
$(function(){
var $empName, $empNumber;
$(".myclass").each(function(key, el) {
$empName= $(el);
$empNumber = $empName.next("input[type='hidden']");
// things to do
// Setting variable e.g url...
$empName.autocomplete(url, {
//code...
}).result(function(e, d, f){
$empNumber.val(f).change();
});
});
$(".emp_num_hidden").on('change', function(e){
var empId = $(this).attr("id");
var $employeeNumberField = $("#" + empId);
// Do the needful...
});
});
进一步讲,您可能要考虑利用数据属性。您可能还希望查看
select
事件以了解自动完成功能。就像是:$(function(){
$(".myclass").autocomplete({
source: url,
select: function(e, ui){
$(this).val(ui.item.label);
$(this).data("emp-number", ui.item.value);
$.post("employeedata.php", { n: ui.item.value }, function(data){
$("#empData").html(data);
});
return false;
}
});
});
假定
url
返回具有label
和value
属性的数组对象。这会将雇员编号作为data-emp-number
属性添加到用户从中进行选择的字段。 label
是他们的员工姓名,value
是他们的员工编号。您还可以使用此回调显示基于“员工编号”的所有其他员工数据。一个有效的示例:https://jsfiddle.net/Twisty/zmevd0r0/
关于javascript - jQuery自动完成功能无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40512506/