jQuery $(this) 在绑定点击事件时超出范围（对象文字）

Question

当我在 jQuery 上绑定 click 事件时，我在尝试获取 $(this) 时遇到问题。

在 ActivateEditMode 里面我得到：SelectedSectionID = undefined 和 $(this) 等于：

我认为这不是我想要获得的锚点。

var Section = {
  Init: function() {
    this.BindActions();
  },

  BindActions: function() {
    $('li.default a.cw_section_edit').on('click', this.ActivateEditMode.bind(event));
  },

  ActivateEditMode: function(Event) {
    Event.preventDefault();
    var SelectedSectionID = $(this).data('sectionid');
    var Li = $(this).closest('li');
    Li.css('background', '#FDF5E6');
    $('#sortable-sections li').each(function() {
      if ($(this).data('sectionid') !== SelectedSectionID) {
        const bcolour = $(this).data('enabled') ? '#FFFFFF' : '#E5E5E5';
        $(this).css('background', bcolour);
      }
    });
  }
};

$(document).ready(function() {
      Section.Init();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="sortable-sections">
  <li class="default cw_td_section_row" data-sectionid="31">
    <div class="grid_2">CRE</div>
    <div class="grid_4">Credito</div>
    <div class="grid_4">Yes</div>
    <div class="grid_2">
      <a href="#" id="cw_section_edit_31" class="cw_section_edit" data-sectionid="31" data-enabled="1">Edit</a>
    </div>
  </li>
  <li class="default cw_td_section_row" data-sectionid="32">
    <div class="grid_2">SAL</div>
    <div class="grid_4">Sales</div>
    <div class="grid_4">Yes</div>
    <div class="grid_2">
      <a href="#" id="cw_section_edit_32" class="cw_section_edit" data-sectionid="32" data-enabled="1">Edit</a>
    </div>
  </li>
  <li class="default cw_td_section_row" data-sectionid="37">
    <div class="grid_2">OT</div>
    <div class="grid_4">Other</div>
    <div class="grid_4">Yes</div>
    <div class="grid_2">
      <a href="#" id="cw_section_edit_37" class="cw_section_edit" data-sectionid="37" data-enabled="1">Edit</a>
    </div>
  </li>
</ul>

Answer 1

您可以使用 event.target 代替 $(this) 获取当前点击的元素。因为 this 现在指的是您的部分对象。

var Section = {
  Init: function() {
    this.BindActions();
  },

  BindActions: function() {
    $('li.default a.cw_section_edit').on('click', this.ActivateEditMode);
  },

  ActivateEditMode: function(event) {
    event.preventDefault();
    var SelectedAnchor = $(event.target);
    var SelectedSectionID = SelectedAnchor.data('sectionid');
    console.log('SelectionId', SelectedSectionID);
    var Li = SelectedAnchor.closest('li');
    Li.css('background', '#FDF5E6');
    $('#sortable-sections li').each(function() {
      if ($(this).data('sectionid') !== SelectedSectionID) {
        const bcolour = $(this).data('enabled') ? '#FFFFFF' : '#E5E5E5';
        $(this).css('background', bcolour);
      }
    });
  }
};

$(document).ready(function() {
      Section.Init();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="sortable-sections">
  <li class="default cw_td_section_row" data-sectionid="31">
    <div class="grid_2">CRE</div>
    <div class="grid_4">Credito</div>
    <div class="grid_4">Yes</div>
    <div class="grid_2">
      <a href="#" id="cw_section_edit_31" class="cw_section_edit" data-sectionid="31" data-enabled="1">Edit</a>
    </div>
  </li>
  <li class="default cw_td_section_row" data-sectionid="32">
    <div class="grid_2">SAL</div>
    <div class="grid_4">Sales</div>
    <div class="grid_4">Yes</div>
    <div class="grid_2">
      <a href="#" id="cw_section_edit_32" class="cw_section_edit" data-sectionid="32" data-enabled="1">Edit</a>
    </div>
  </li>
  <li class="default cw_td_section_row" data-sectionid="37">
    <div class="grid_2">OT</div>
    <div class="grid_4">Other</div>
    <div class="grid_4">Yes</div>
    <div class="grid_2">
      <a href="#" id="cw_section_edit_37" class="cw_section_edit" data-sectionid="37" data-enabled="1">Edit</a>
    </div>
  </li>
</ul>

jQuery $(this) 在绑定点击事件时超出范围（对象文字）

jQuery $(this) out of scope when binding click event (Object Literal)

jquery

bind