Find data attribute on click - Jquery

Question

I'm clicking a button to remove a hidden class. But it's a dynamic list and I only want to open one of the options Here is my HTML

HTML:

   <% @assignments.each do |assignment| %>
     <div class="assignments__index__card">

      <div class="assignments__index__options">
        <i class="fa fa-list-ul" aria-hidden="true" data-assignment="<%= assignment.id %>"></i>

        <ul class="assignments__index__options__index <%= assignment.id %> hidden">
          <li><%= link_to "Remove", account_assignment_path(assignment), method: :delete %></li>
          <li><%= link_to "Edit", account_assignments_path %></li>
        </ul>
      </div>
    </div>
  <% end %>

Here is my JS

JS

window.dashboard = {
  sel: {
    dropdown: $(".fa-list-ul")
  },

  init: function() {
    var _this = this;

    $(document).on("click", _this.sel.dropdown, function(event) {
      debugger;
      $(".assignments__index__options__index").removeClass("hidden")
      $("body").addClass("openDropdown")
      event.preventDefault();
    });

    $(document).on("click", "body.openDropdown", function(event) {
      $(".assignments__index__options__index").addClass("hidden")
      $("body").removeClass("openDropdown")
      event.preventDefault();
    });
  }
};

dashboard.init();

This problem is I need to pass the data of the assignment to the Javascript

As you can see on click of this class fa-list-ul I want to find the data on that class. but this does not work inside the click function:

$(this).data("assignment")

How do I get the data from this attribute inside the click function?

Please provide a running snippet (Ctrl+M in editor).

alpinist
– alpinist

2017-07-16 18:51:35 +00:00
Commented Jul 16, 2017 at 18:51 — alpinist
– alpinist, Commented Jul 16, 2017 at 18:51

Milan Chheda · Accepted Answer · 2017-07-17 09:35:33Z

You may change this line:

$(document).on("click", _this.sel.dropdown, function(event) {

to:

$(document).on("click", '.fa-list-ul', function (event) {

window.dashboard = {
  sel: {
    dropdown: $(".fa-list-ul")
  },

  init: function() {
    var _this = this;

    $(document).on("click", '.fa-list-ul', function(event) {
      console.log($(this).data('assignment'));
      $(".assignments__index__options__index").removeClass("hidden")
      $("body").addClass("openDropdown")
      event.preventDefault();
    });

    $(document).on("click", "body.openDropdown", function(event) {
      $(".assignments__index__options__index").addClass("hidden")
      $("body").removeClass("openDropdown")
      event.preventDefault();
    });
  }
};
dashboard.init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="assignments__index__card">

  <div class="assignments__index__options">
    <i class="fa fa-list-ul" aria-hidden="true" data-assignment="<%= assignment.id %>">CLICK HERE</i>

    <ul class="assignments__index__options__index <%= assignment.id %> hidden">
      <li>
        <%= link_to "Remove", account_assignment_path(assignment), method: :delete %>
      </li>
      <li>
        <%= link_to "Edit", account_assignments_path %>
      </li>
    </ul>
  </div>
</div>

Collectives™ on Stack Overflow

Find data attribute on click - Jquery

HTML:

JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML:

JS

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related