CODEWITHSUNDEEP
javascripthtmldjango-templates
synic
synic

Reputation: 26678

overriding tr onclick

I've got the following code in a django template:

{% for item in items %}
  <tr onclick="{% url collection:viewitem item_id=item.id %}">
    <td>{{ item.name }}</td>
    <td>{{ item.date }}</td>
    <td>
      <button onclick="{% url collection:edititem item_id=item.id %}" type="button">Edit</button>
      <button onclick="{% url collection:removeitem item_id=item.id %}" type="button">Remove</button>
    </td>
  </tr>
{% endfor %}

However, the button onclick events don't work, because the tr onclick seems to override it. How can I prevent this from happening?

Upvotes: 12

Views: 5855

Answers (3)

DonH
DonH

Reputation: 131

An other approach: Create a separate row for the button so it wont inherit the tr onclick event of the main row. Something like this:

<tr onclick="doSomething()">
   <td rowspan="2">A</td>
   <td rowspan="2">B</td>
   <td rowspan="2">C</td>
 </tr>
 <tr>
   <td><button type="button">Click</button></td>
 </tr>

Upvotes: 0

Pranay Shirolkar
Pranay Shirolkar

Reputation: 167

Using event.stopPropagation() will do the trick!

Upvotes: 2

Markus
Markus

Reputation: 368

please try the following:

<html>
    <body>
        <table >
            <tr onclick="alert('tr');">
                <td><input type="button" onclick="event.cancelBubble=true;alert('input');"/></td>
            </tr>
        <table>
    </body>
</html>

The event.cancelBubble=true will suppress the tr click event

Upvotes: 21

Related Questions