多个事件的Jquery绑定
多个事件的Jquery绑定
提问于 2018-10-16 02:54:30
我是jquery的业余爱好者。我正在尝试创建一个搜索函数，它可以很好地使用，直到select元素没有包含在内。你能检查一下我的错误在哪里吗？
$(function () {
$('#keresomezo').bind('keyup change',(function () {
var that = this,
value = $(this).val();
// Take values from html
keresomezo = $("input[name=keresomezo]").val();
keresomezo_ = $("input[name=keresomezo_]").val();
keresomezo_zip = $("input[name=keresomezo_zip]").val();
keresomezo_city = $("input[name=keresomezo_city]").val();
keresomezo_rank = $( ".rank option:selected" ).val();
//keresomezo_rank = $("input[name=keresomezo_rank]").val();
// minimum length
if (value.length >= minlength ) {
// loading
$('#ccenter').append('<div id="loadingmessage"><img src="style/images/ajax-loader.gif"></div>');
$.ajax({
type: "GET",
url: "pages/search.php",
data: {
'company' : keresomezo,
'contact' : keresomezo_,
'zip' : keresomezo_zip,
'city' : keresomezo_city,
'rank' : keresomezo_rank
},
dataType: "text",
success: function(msg){
//we need to check if the value is the same
if (value==$(that).val()) {
// Set navbox info
loadnavbox("Company search");
//Receiving the result of search here
document.getElementById("ccenter").innerHTML=msg;
}
}
});
}
}));
});和html：
<div class="contact_keresomezo" id="contact_keresomezo">
<input type="text" name="keresomezo" id="keresomezo" title="Search by company name" placeholder="Company name">
<input type="text" name="keresomezo_" id="keresomezo" title="Search by contact name" placeholder="Contact name">
<input type="text" name="keresomezo_zip" id="keresomezo" title="Search by ZIP code" placeholder="ZIP">
<input type="text" name="keresomezo_city" id="keresomezo" title="Search by City" placeholder="City">
<select name="keresomezo_rank" id="keresomezo" class="rank" title="Search by Rank">
<option value="" selected>Rank</option>
<?php print company_rank("",$mysqli); ?>
</select>
</div>因此，代码在没有select元素的情况下可以工作，但是有了它，它就不能工作了。我已经用了两天了，这让我很抓狂。
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-16 03:16:13
您正在绑定到id。Id必须是唯一的。jQuery 3中不推荐使用bind，这就是我将其改为on的原因。
此外，您还试图将select作为input的目标，但它不是。您可以使用:input伪选择器将其作为目标。
$(function() {
$(':input[name^="keresomezo"]').on('keyup change', (function() {
var that = this,
value = $(this).val();
// Take values from html
keresomezo = $("input[name=keresomezo]").val();
keresomezo_ = $("input[name=keresomezo_]").val();
keresomezo_zip = $("input[name=keresomezo_zip]").val();
keresomezo_city = $("input[name=keresomezo_city]").val();
// Any of these work
keresomezo_rank = $(".rank option:selected").val();
keresomezo_rank = $(":input[name=keresomezo_rank]").val();
keresomezo_rank = $(".rank").val();
console.log(keresomezo);
console.log(keresomezo_);
console.log(keresomezo_zip);
console.log(keresomezo_city);
console.log(keresomezo_rank);
}))
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact_keresomezo" id="contact_keresomezo">
<input type="text" name="keresomezo" id="keresomezo" title="Search by company name" placeholder="Company name">
<input type="text" name="keresomezo_" id="keresomezo" title="Search by contact name" placeholder="Contact name">
<input type="text" name="keresomezo_zip" id="keresomezo" title="Search by ZIP code" placeholder="ZIP">
<input type="text" name="keresomezo_city" id="keresomezo" title="Search by City" placeholder="City">
<select name="keresomezo_rank" id="keresomezo" class="rank" title="Search by Rank">
<option value="" selected>Rank</option>
<option value="1">Rank1</option>
<option value="2">Rank2</option>
</select>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52823098
复制相关文章
相似问题