2013-11-07 3 views
0

У меня есть таблица ...Предотвратить уровня строки ссылку на отменяя ссылку на уровне столбцов

<table class="data-table"> 
    <thead> 
    <tr> 
     <th width="16">ID</th> 
     <th>Name</th> 
     <th>Reference</th> 
     <th>Link</th> 
     <th>YouTube</th> 
     <th>Status</th> 
     <th width="16">Delete</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="clickable" data-href="/videos/1/"> 
     <td>1</td> 
     <td>Test Video</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td> 
     <a href="/videos/delete/1" 
      onclick="return confirm_delete();"> 
      Delete 
     </a> 
     </td> 
    </tr> 
    </tbody> 
</table> 

И сценарий ...

<script> 
    function confirm_delete() { 
    var result = confirm("Are you sure you want to delete this video?"); 
    return result; 
    } 
</script> 

Щелкнув строку требуется для правильного URL , Щелчок по ссылке Удалить запрашивает подтверждение. Если я выберу ОК, это приведет к правильному URL-адресу удаления, но если я выберу «Отмена», он отменяет URL-адрес удаления, но переходит на URL-адрес уровня. Как я могу это предотвратить?

+0

Try '' Delete

+0

http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute – werehuman

+0

Проблема является распространение события от якоря , предотвратите его использование 'event.stopPropagation()' см. http://jsfiddle.net/arunpjohny/874dt/2/ –

ответ

0

С благодарностью всем, кто прокомментировал/ответил. Для устранения проблемы я сделал следующее.

Сначала я снял OnClick атрибут и добавил класс к тега.

<td><a class="delete" href="/videos/delete/1">Delete</a></td> 

Затем я выполнил следующий сценарий.

<script> 
    $(document).ready(function() { 
    $('a.delete').click(function(event) { 
     var result = confirm("Are you sure you want to delete this video?"); 

     if (!result) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     } 
    }); 
    }); 
</script> 
0
<a href="/videos/delete/1" 
    onclick="event.stopPropogation(); return confirm_delete();">Delete</a> 

Однако сделайте себе одолжение и разместите свой javascript в теге скрипта.

<a id="delete_1" href="/videos/delete/1">Delete</a> 
... 
<script> 
    $('#delete_1').click(function(e) { 
     e.stopPropogation(); 
     return confirm("Are you sure you want to delete this video?"); 
    }); 
</script> 
Смежные вопросы