JQuery 滑块变化事件和加载函数

Question

我有一个价格滑块，我想在用户更改价格滑块时重新加载内容。然而，当事件被触发并且加载函数生效时，我得到以下错误

TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement.

这是我的代码

    $(".range-filter").on('slidechange', function(){

    var formdata = $("#filterList").serializeObject();
    var attrfilter = $("#filterList").find('input[name^=attrfilter]:checked');
    alert("yey");

    $("#productList").load(
        url,
        { 
            formdata: formdata,
            attrfilter: attrfilter
        },
        function(responseText, statusText, xhr){
            if(statusText == "success")
                return;
            if(statusText == "error")
                return;
        }
    );
});

为什么会产生冲突？我应该使用普通的 ajax 函数吗？

Answer 1

记录 formdata 和 attrfliter 以查看它们是否是可以在对象中给出的有效值（加载函数中的第二个参数）作为 Ajax 调用的数据发送.

var attrfilter = $("#filterList").find('input[name^=attrfilter]:checked');

我认为是上面一行造成了问题。 attrfilter 将是 jQuery DOM 元素对象而不是 true 或 false 我想你会想要为 Ajax 打电话。

您可以做的是：

var attrfilter = $("#filterList").find('input[name^=attrfilter]').prop("checked")
// will return true or false

另请参阅：

TypeError: stepUp called on an object that does not implement interface HTMLInputElement

TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement

Answer 2

是的，我忘了像这样映射值：

        attrfilter = $.map(attrfilter, function(element) 
    {
        var start = element.name.indexOf('[')+1;
        var end = element.name.indexOf(']');
        return {id: element.name.substring(start, end), value: element.value};
    });

JQuery 滑块变化事件和加载函数

JQuery Slider change event and load function

javascript

ajax

jquery

load