jQuery $ (это) вне области действия при привязке события щелчка (Object Literal) - PullRequest
Новая
       54

jQuery $ (это) вне области действия при привязке события щелчка (Object Literal)

0 голосов
/ 22 апреля 2020

У меня возникают проблемы при попытке получить $(this) при привязке события click к jQuery.

Внутри ActivateEditMode Я получаю: SelectedSectionID = undefined и $(this) равно:

enter image description here

, которое я Вера - это не якорь, который я пытаюсь получить. 

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>

1 Ответ

1 голос
/ 22 апреля 2020

Вы можете использовать event.target , чтобы вместо $ (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>
...