Search code examples
jquerybind

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

I am having issues trying to get $(this) when I bind a click event on jQuery.

Inside ActivateEditMode I get: SelectedSectionID = undefined and $(this) equals to:

enter image description here

which I believe is not the anchor I am trying to get.

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>

Solution

  • You can use event.target to instead of $(this) get the current clicked element. Because this is now referes to your section object.

    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>