獲取 LI 元素的 ID 在 Jquery 中起作用時不起作用

Question

我可以使用 JQuery 的 click 函數獲取 LI 元素的 ID，但是當我創建自己的函數時，LI 元素的 ID 未定義：

http://codepen.io/omarel/pen/gwvpvQ

第一個 LI 元素使用了 Jquery 的點擊功能。 第二個元素使用它自己的函數，其中 ID 出現未定義。

HTML

 <ul id="pricerange_options" class=" options">

    <li id="option1" data-value="1" class="dropdown-option">1</li>

    <li id="option2" data-value="1" class="dropdown-option" onClick="chooseDropDownOption();">2</li>

 </ul>

查詢

  function chooseDropDownOption() {
        alert($(this).attr('id'));
    }

  $('#pricerange_options li').click(function () {
        alert($(this).attr('id'));
   });

Answer 1

當您在 jQuery 中附加一個不顯眼的事件處理程序時，該函數在引發事件的元素范圍內運行，因此this關鍵字指的是該元素。

當通過on*事件屬性附加事件時，它在window的范圍內運行，因此this是指window 。 要解決此問題，請將元素作為參數發送到您的函數：

 function chooseDropDownOption(el) { alert($(el).attr('id')); // or just el.id }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="pricerange_options" class=" options"> <li id="option2" data-value="1" class="dropdown-option" onClick="chooseDropDownOption(this);">2</li> </ul>

應該注意的是，使用on*事件處理程序已經過時了。 在可能的情況下，您應該始終使用不顯眼的事件處理程序。