1

各行がクリック可能であるテーブルがあります

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

そこに問題はありません。

次に、この行の1つのセル内に3つのリンクがあります。異なるページを指す2つは正常に機能します。モーダルダイアログを切り替えるリンクが1つありますが、タグに含まれるonclickでは表示されません。なくても問題なく動作します。私は以下を使用します

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

リンクがクリックされるたびに、に割り当てられたhrefに直接移動します。問題はイベントのバブリングにあると思います。グーグルを実行して、モーダルトリガーをクリックしたときのバブリングをキャンセルする小さなJavascriptスクリプトを見つけました。

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

と

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

モーダルトリガーで

これにより、クリックしたときに最初のリンクが読み込まれる問題が解決されますが、モーダルも表示されません。

助けてくれてありがとう。

4

3 に答える 3

1

onclickページをjQueryでインストルメントしている場合は、このイベントを使用することはお勧めしません。代わりに、clickプログラムで割り当てられたハンドラーを使用してください。これにより、誤って何かを踏みつけてしまうことがなくなります。

詳細（おそらくjsfiddle）がないと、特定の問題が何であるかを確実に言うことは困難ですが、適切なアンカータグに何らかのセレクターを追加して、次のようなパラダイムを使用することを試みることができます。

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

  });
</script>
于 2013-01-23T18:11:27.667 に答える
0

代わりに、単に「onmousedown」イベントを使用できます。

<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;\">

ここに小さなデモjsfiddleがあります：http：//jsfiddle.net/r4dnp/6/

適切なスクリプト割り当てのイベントハンドラーを使用することを常にお勧めしますが、上記の方法で作業を完了できます。コードの重要な部分：

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

document.location.hashを、リンクHREFの値に等しく設定します。

于 2013-01-23T18:50:27.863 に答える
0

私は実用的な解決策を持っています。それを行うためのハック方法かもしれませんが、それは機能します。また、モーダルを閉じたときに、の元のonclickイベントに従うため、モーダル<div>をの外に移動したことに注意してください。<tr><tr>

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

上記は、をクリックしたときにチェックする変数を設定しますtr onclick。

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

これは、リンクを開く前にtrlinkがtrueであるかどうかをチェックし、そうでない場合はtrueに設定します。

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

最後に、このタグでアクションを実行する前に、trlink変数をfalseに設定します。

イベント処理を正しく行うことができませんでしたが、これでうまくいくようです。

于 2013-01-23T21:08:51.220 に答える