<span>最初不存在的</span>JQuery 選擇元素

Question

我一直在尋找很長時間，並找到了幾個建議使用.on()答案，如$('.idOfMyElemenet').on()甚至適用於尚不存在的元素。 但這似乎並沒有找到元素。 難道我做錯了什么？

最高級別的<span> （在屏幕截圖中）直到我點擊下拉菜單才存在。 最終，我試圖在用戶單擊任何<li>時觸發事件（也就是從下拉列表中選擇一個選項）。

$(document).ready(function () {
    var test = "#select2-id_customer-results";
    $(test).on("click", function() {
        console.log('hello')
    })
})

編輯：

感謝 Drew Baker - 我認為他的第二個解決方案是要走的路。 但還沒有完全到位...

來自 select2 文檔

所有公共事件都使用 jQuery 事件系統進行中繼，並在 Select2 附加到的<select>元素上觸發。

所以我嘗試通過 id（它似乎不存在，但可能是 id_customer）和類來收聽它。 如下的添加類我沒有工作。 有沒有辦法使用 Jquery 來聽這個？

$(document).ready(function () {
    // console.log($('#id_customer'));
    $('.modelselect2 form-control select2-hidden-accessible').on('select2:select', function (e) {
        var data = e.params.data;
        console.log(data);
    });    
});

Answer 1

我會回答你的問題，然后給你一個更好的解決方案。

首先，您需要確保附加.on()的東西確實存在。 我通常使用包含 DIV 或失敗的body或html將工作。

其次，您缺少一個參數，該參數告訴 jQuery 您希望點擊的內容。 在這種情況下，我假設它是帶有您提供的 ID 的UL標簽。

這應該做你想做的：

$(document).ready(function () {
    $('body').on("click", "#select2-id_customer-results", function() {
        console.log('hello')
    })
})

但是更好的解決方案是使用 Select2 API 讓它告訴您何時選擇了某些內容。 這將更加可靠，並且應該使您的代碼在升級到 Select2 后工作。

像這樣的東西：

$('select[name="customer"]').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

注意： #mySelect2可能不是您所擁有的。 使用您用於在 jQuery 中初始化 Select2 的任何 ID。

您可以在此處閱讀有關該 API 的更多信息： https : //select2.org/programmatic-control/events

Answer 2

如果您的元素是動態生成的並且您想要定位該特定元素。 您需要指定一個靜態容器/父元素來指示它所屬的位置。

嘗試這個：

$( '#dynamicallyAddedElement' ).on( 'click', '#wrapper', function () { ... });

//where #wrapper is a static parent element in which you add the dynamic links.

因此，您有一個硬編碼到 HTML 源代碼中的包裝器：

附注。 希望我在某種程度上有所幫助。

Answer 3

如果需要在單擊<li>元素時觸發事件，則必須使用該元素的id或class作為選擇器。 檢查以下代碼：

$(document).ready(function () {
  var test = ".select2-results__option";
  $(test).on("click", function() {
      console.log('hello')
  })
})

Answer 4

事實證明這是django-auto-complete 中的一個舊錯誤。 下面的代碼有效。 我不知道為什么，但現在我可以繼續前進了。

注意：'name' 是 select2 選擇元素的值（見底部截圖）

document.querySelector('select[name="customer"]').onchange=function() {
  console.log("myselect2name changed");
};