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 Slider更改事件和加载函数

2 个答案: