重写 <tr> onclick，在单个单元格中切换模态

Question

I have a table where each row is clickable using

 echo "<tr class=\"trlink\" onclick=\"location.href='".$row['task_id']."'\">\n";

No issues there.

I then have three links inside one cell in this row. The two that point to different pages work fine. There is one link however that toggles a modal dialog, it will not display with the onclick included in the tag. It works fine without. I use the following as an

<a role=\"button\" href=\"#" . $row['task_id'] . "taskModal\" data-toggle=\"modal\">

Whenever the link is clicked, it goes straight to the href assigned to the . I assume the issue lies in event bubbling. I did some googling and found a small Javascript script to cancel the bubbling on click of the modal trigger:

function cancelIt(evt) {
var e = (typeof evt != 'undefined') ? evt : event;
e.cancelBubble = true;
}

And

<a href=\"...\" onclick=\"cancelIt(event);\" >

on the modal trigger

This solves the problem of loading the initial link when clicked, however the modal does not display either.

Thanks for any assistance.

Answer 1

I don't recommend using the onclick event if you're instrumenting your pages with jQuery. Instead, use a click handler assigned programatically. This ensures you're not accidentally stomping on something.

Without more details (perhaps a jsfiddle), it's difficult to say for sure what your particular problem is, but one thing you can try is to add some kind of selector to the appropriate anchor tag, then use a paradigm similar to:

<script>
  $(function() {
    $('#anchorTagICareAbout').click(function(e) {
      e.preventDefault();
      displayModalDialog();
    });

  });
</script>

Answer 2

You could simply use the "onmousedown" event instead.

<a role=\"button\" href=\"#" . $row['task_id'] . "taskModal\" data-toggle=\"modal\" 
onmousedown=\"event.cancelBubble=true;event.returnValue=false;document.location.hash=this.getAttribute('href').replace('#','');return false;\">

Here's a little demo jsfiddle: http://jsfiddle.net/r4dnp/6/

Using proper script assigned event handlers is always preferred, but the above will get the job done. The key part of the code:

document.location.hash=this.getAttribute('href').replace('#','')

Sets the document.location.hash equal to whatever the value of the links HREF is.

Answer 3

I have a working solution . It might be a hack way to do it, but it works. Note I also moved the modal <div> outside of the <tr> because when I closed the modal it would follow the original onclick event for the <tr> .

<script type="text/javascript">
var trlink = true;
</script>

Above sets a variable to check when clicking tr onclick .

<tr onclick=\"if(trlink) {location.href='google.com'} else { trlink = true; }>

This checks if the trlink is true before opening link, if not, sets it true.

<a onclick="trlink = false" role="button" href="#1printerModal" data-toggle="modal">None</a>

Finally this sets the trlink variable to false before performing any actions in this tag.

I couldn't get the event handling stuff correct, this seems to do the trick though.