jQuery $（this）绑定单击事件（对象文字）时超出范围

Question

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

在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）来获取当前单击的元素。因为现在引用的是您的section对象。

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>