'this'對象在jquery中具有參數的回調內部未定義

Question

我附加一個回調函數來選擇這樣的更改事件框

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

這里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是未定義的。

這意味着這兩件事情都是真的：

1. 發生change的元素（ select.on調用中select中的一個元素）從未調用過.data('api', something) ，並且

2. 該元素沒有data-api屬性 - 或者更確切地說，它不是第一次使用.data 。

或者 ，這可能意味着party.selectOne已經綁定在您未顯示的代碼中的某個位置。

（請記住， data 不是 data-*屬性的訪問者。 它的數量越來越少 。）

jQuery的基於集合的性質可以讓你失望。 如果select.on調用中有select中的多個元素，並且您只在其中一個上設置了api數據項（直接通過.data或間接通過data-api屬性），那么就會發生change事件它們的不同的一個可以給undefined為.data('api') 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作為對象傳遞，$（this）將引用config ，而不是引用select box元素