-2

I have a table in my HTML file and in one of the columns I have a button component from bootstrap, when the button is clicked a drop down appears with three options - 'medium', 'low', 'servicerequest'. When this item is clicked, I am trying to get the value of the item clicked.

$(".table table-hover table-condensed").on('click', '.dropdown-menu', function(e) {
  var id = $(this).attr('#mediumpriority');
  alert(id);
});
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table table-hover table-condensed">
  <thead>
    <tr>
      <th>Priority</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
High
</button>
          <div class="dropdown-menu">
            <a id="mediumpriority" class="dropdown-item">Medium</a>
            <a class="dropdown-item">Low</a>
            <a class="dropdown-item">Service Request</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

When I click on 'High' button, I get a drop down of three options, if i click on 'Medium' I expect an alert to show the the 'Medium' value:

<a id="mediumpriority" class="dropdown-item">Medium</a>

Can someone point out why I am not getting this alert when I run and click on the priority 'medium' ?

Improve this question
1
  • 1
    #mediumpriority is not an attribute. Commented Feb 22, 2018 at 18:31

2 Answers 2

Reset to default
1

To jQuery selector looks incorrect. It should be

$(".table.table-hover.table-condensed").on('click', '.dropdown-item', function(e) { 
    var menu = $(this).html();
    alert(menu);
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

this did not work: I got 'undefined'
I've just updated my answer.
0

This selector is wrong:

$(".table table-hover table-condensed")
          ^           ^

Use this: .table.table-hover.table-condensed

To get the attr id use this: $(this).attr('id')

The event delegation call is using the wrong selector for children

$(".table table-hover table-condensed").on('click', '.dropdown-menu', function(e) {
                                                     ^

Use this instead: .dropdown-item

$(".table.table-hover.table-condensed").on('click', '.dropdown-item', function(e) {
  var text = $(this).text();
  alert(text);
});
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table table-hover table-condensed">
  <thead>
    <tr>
      <th>Priority</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
High
</button>
          <div class="dropdown-menu">
            <a id="mediumpriority" class="dropdown-item">Medium</a>
            <a class="dropdown-item">Low</a>
            <a class="dropdown-item">Service Request</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Improve this answer

2 Comments

That was close to what I wanted, but the id outputed 'mediumpriority' whereas I was after 'Medium'. It has been answered below.
@RA19 umm do you want the HTML. I recommend you .text() to avoid problems with HTML tags. Answer updated!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.