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 に移動します。[削除] リンクをクリックすると、確認を求められます。[OK] を選択すると、正しい削除 URL に移動しますが、[キャンセル] を選択すると、削除 URL はキャンセルされますが、行レベルの URL に移動します。どうすればそれを防ぐことができますか?

4

2 に答える 2

0 
<a href="/videos/delete/1"
  onclick="event.stopPropogation(); return confirm_delete();">Delete</a>

ただし、JavaScript を script タグに入れてください。

<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>
于 2013-11-07T03:45:57.497 に答える
0

コメント/回答してくれたすべての人に感謝します。問題を解決するために次のことを行いました。

まず、 onclick属性を削除し、 aタグにクラスを追加しました。

<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>
于 2013-11-07T05:43:05.120 に答える