![](/img/trans.png)
[英]Fire function on change of <input> tag with jQuery (checkbox/textbox)
[英]Function to fire on checkbox change or on jQuery slider.slide
我正在尝试将两个ajax调用合并为一个。 一个触发表单中复选框的更改,另一个触发jQuery滑块“滑动”时触发。 我想将两者结合起来。
我当时在考虑使用.bind(),但我需要使用多个jQuery选择器和一个以上的事件。
两个jQuery选择器将是:
这两个不同的事件分别是
显然,不同的事件侦听器必须使用正确的jQuery选择器。
复选框的js:
// when a checkbox is clicked
$("input[type=checkbox]").click(function() {
// remove the original results
$('#original_results').css("display", "none");
// which filter section does it belong to
var filter_section = $(this).attr('name');
// should it be filtered out or left in
var remove = $(this).prop('checked');
// if needs to be filtered
if (!remove)
{
// add it to our filter list for the specified section
filters[filter_section].push(this.value);
}
else
{
// take it off the list for the specified section
var index = filters[filter_section].indexOf(this.value);
if (index > -1)
{
filters[filter_section].splice(index, 1);
}
}
$.ajax({
type: 'POST',
url: '/results/search_filter',
//url: url,
beforeSend: function() {
//Display a loading message while waiting for the ajax call to complete
$('#filter_updating').html("Filtering your search...");
},
success: function(response) {
//inject the results
$('#search_results').html(response);
},
data: { filters: filters, criteria: criteria }
}); // end ajax setup
});
滑块的js:
$(function() {
$( "#pay_range" ).slider({
range: true,
min: pay_min,
max: pay_max,
values: [ pay_min, pay_max ],
slide: function( event, ui ) {
$( "#filter_by_pay" ).html( "Pay Range: ¥" + ui.values[ 0 ] + " - ¥" + ui.values[ 1 ] ).css("color", "black");
$.ajax({
type:'POST',
url: '/results/search_filter',
beforeSend: function() {
//Display a loading message while waiting for the ajax call to complete
$('#filter_updating').html("Filtering your search...");
},
success: function(response) {
//inject the results
$('#search_results').html(response);
},
data: { min: ui.values[0], max: ui.values[1] }
});
}
});
});
您可以简化为一个功能:
function doAjax() {
var ranges = $('#pay_range').slider('values')
var data = {
min: ranges[0],
max: ranges[1],
filters: filters,
criteria: criteria
}
/* show loading*/
$.post('ajaxData.html',data,function(response){
$('#search_results').html(response);
})
}
然后对于滑块:
$("#pay_range").slider({
range: true,
min: pay_min,
max: pay_max,
values: [pay_min, pay_max],
stop: function(event, ui) {
doAjax();
}
});
调整过滤器后,在复选框处理程序中执行相同的操作
您的代码未显示citeria
来自何处
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.