时间戳

首页 > 解决方案 > 'this' 引用未定义

jquery - 'this' 引用未定义

问题描述

select我正在运行该get_cities_by_countyID()功能的 onchange 。在我写的函数中：

function get_cities_by_countyID(countryID) {
  var element = $(this);     
  alert (element.attr("class"));

  // other logic...

  element.closest('form').find('.cityField').html(html);
}

然而alert()印刷品undefined。我怎样才能解决这个问题？

<form>  
  <div class="col-md-5">
    <label>country</label>
    <select class="selectpicker" name="attraction[countryCode]" data-live-search="true" onchange="get_cities_by_countyID(this.value)">
      <option value=""></option>
    </select>
  </div>
  <div class="col-md-5">
    <label>city</label>
    <select class="selectpicker cityField" name="attraction[cityID]" data-live-search="true">
      <option value=""></option>
    </select>   
  </div>
</form>

标签： jquery

解决方案

问题在于，当您使用on*属性分配事件处理程序时，不会在引发事件的元素范围内调用该函数；它被全局调用，因此this是窗口。这就是您收到undefined.

要解决此问题，this请将 event 属性中的引用传递给函数，然后从那里检索所需的值：

function get_cities_by_countyID(el) {
  var $el = $(el);
  var countryId = $el.val();
  console.log($el.prop("class"));
  //element.closest('form').find('.cityField').html(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="col-md-5">
    <label>country</label>
    <select class="selectpicker" name="attraction[countryCode]" data-live-search="true" onchange="get_cities_by_countyID(this)">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
  <div class="col-md-5">
    <label>city</label>
    <select class="selectpicker cityField" name="attraction[cityID]" data-live-search="true">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
</form>

但是您应该注意，使用on*事件属性非常过时，应尽可能避免使用。不显眼的事件处理程序是更好的做法。它们还允许您this在处理程序中使用关键字作为对引发事件的元素的引用。由于您已经在使用 jQuery，因此您可以像这样实现它们：

$(function() {
  $('#country').on('change', function() {
    var $el = $(this);
    var countryId = $el.val();
    console.log($el.prop("class"));
    //element.closest('form').find('.cityField').html(html);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="col-md-5">
    <label>country</label>
    <select class="selectpicker" name="attraction[countryCode]" data-live-search="true" id="country">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
  <div class="col-md-5">
    <label>city</label>
    <select class="selectpicker cityField" name="attraction[cityID]" data-live-search="true">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
</form>

推荐阅读