CODEWITHSUNDEEP
phpjquerytwitter-bootstrap
Paul
Paul

Reputation: 11746

How do I assign click events and IDs to multiple buttons in twitter bootstrap?

I currently have multiple drop down buttons for several table rows that need to be tied to an onClick event. The problem I'm having is capturing the information from each button. Here is what my test code looks like:

<table class="table table-bordered">
    <tbody>
    <tr>
      <td><img src="/photos/files/5/m/131309a4fb918110ed1061e90a715eca.jpeg"/></td><td><div class="btn-group">
      <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
      <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
      </ul>
    </div>
    </tr>
    <tr>
      <td><img src="/photos/files/5/m/b19102d8ba1158e2a139ffa84e8e8540.jpeg"/></td><td><div class="btn-group">
      <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
      <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
      </ul>
    </div></tr>    
    </tbody>
</table>

current javascript:

$('.btn').click(function(e) {
    e.preventDefault();
    ???
});

How do I capture and process each click event from multiple buttons? I'm assuming I need to add a unique ID to each button but how can I capture an onclick event for each button item?

Upvotes: 1

Views: 388

Answers (1)

Samson
Samson

Reputation: 2821

inside the function you can use this to reffer to the object in cause. 

     $(".btn").click(function () {
     //here you can check which button did it
              if ($(this).attr('class')=='icon-pencil')
                //do sth
              else 
      //do sth else
    });

Check the jquery docs.

Upvotes: 1

Related Questions