Question

我要在这样的 change 事件上附加一个回调函数以选择框

select.on('change', config, party.selectOne);

此处 config 是我传递给回调函数的参数。在回叫内，我可以访问 config 参数。

但是我的问题是，在回调内部，$（this）返回除选择框对象之外的意外对象

party.selectOne= function(config) {
    // is the selectbox
    var selectbox = $(this);
    var api = selectbox.data('api');
}

所以我得到的 api 为未定义。但是，如果我不传递任何参数进行回调，这将很好地工作。我怎么了？

示例：

<select data-api="{'name':'one','address':'address1'}">
    <option>one</option>
    <option>two</option>
</select>

Answer 1

所以我得到api的定义未定义。

这意味着这两件事是正确的：

发生change的元素（在您进行select时，select.on中的元素之一）从未被调用过.data('api', something)，并且
该元素上没有data-api属性-或者，直到第一次使用.data时，该元素都没有

或，这可能意味着在您未显示的代码中，party.selectOne一直bound。

（请注意，data不是不是data-*属性的访问者。It's both more and less than that。）

jQuery的基于集合的性质会使您失望。如果在select调用时select.on中有多个元素，而您仅设置了api数据项（直接通过.data或间接通过{{ 1}}属性），然后在其中一个上发生data-api事件，其中一个可能在{{1} }。 jQuery的数据缓存是按元素而不是按组的。

Answer 2

未定义this，但{api}的返回值data()是未定义的。
使用attr()代替data()：

// To make this example work
var party = {};
var config = { foo: "bar" };
var select = $("select");
// ---

party.selectOne = function(config) {
    var selectbox = $(this);
    var api = selectbox.attr('data-api');
    
    console.log(api);
    console.log(config.data.foo);
}

select.on('change', config, party.selectOne);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select data-api="{'name':'one','address':'address1'}">
<option>one</option>
<option>two</option>
</select>

Answer 3

已解决。此处 config 参数的类型为Object。如果我们将 config 参数作为字符串传递，它将得到解决。我认为，如果我们将config作为 object 传递，则$（this）将引用 config ，而不是引用 select box 元素

jQuery

3 个答案: