javascript - URL の .click のキャプチャ

Question

私はJavascript/Ajaxに比較的慣れていません。

ユーザーが特定の URL をクリックすると、そのクリックを完全に Javascript/jquery で処理したいと考えています。

<a class="row_edit" href="/sales_item/edit/{{ item.id }}"></a>

私が行ったことは、このhtmlファイルにjavascriptを追加することです:

   $(document).ready(function () {  
        $(".row_edit").click(row_edit);
    });

   function row_edit() {
      var url = $(this).attr("href") + "/";
      ...
   }

これは非常にうまく機能します。row_edit をクリックするたびに、JavaScript が起動し、部分的なサイトの読み込みが行われます。しかし、代わりに実際のリンクが起動するように見える場合があります (部分的なサイトが画面全体として読み込まれていることがわかります)。競合状態があるようです。

javascript のみが起動していることを確認する最善の方法は、の内容を to に変更することだと思いhrefます#。そうすれば、URL自体がとにかく動かず、JavaScriptだけが起動することを確認します。しかし、どうすれば自分のurl価値を得ることができrow_edit()ますか？

多分私はここで間違ったアプローチを取っています。皆さんはこの問題をどのように解決しますか？

score 2 · Accepted Answer

JavaScript のみが起動していること (クリックのデフォルトアクション (ナビゲーション) をキャンセルすること) を確認するにpreventDefault();は、クリックハンドラでを呼び出す必要があります。

元：

$(document).ready(function () {  
        $(".row_edit").click(row_edit);
    });

   function row_edit(event) {
      var url = $(this).attr("href") + "/";
      ...
      event.preventDefault();
   }

score 1 · Accepted Answer

href の代わりに javascript を使用してリダイレクトを実行する意図についてはよくわかりません。とにかく、アプローチの1つがここにあります...

「data-」(HTML5) をサポートする最新のブラウザーに実装している場合は、そのような属性を使用できます。

<a class="row_edit" data-url="/sales_item/edit/{{ item.id }}" href="#"></a>

JavaScriptを変更して、適切な属性値を取得します

 var url = $(this).attr("data-url") + "/";

score 0 · Accepted Answer

<a href="#"> click me </a>

clcik をブロックするための「#」
jquery ブロックを介してデフォルトイベントをブロックします。
新しいイベントハンドラーを追加します。

参照リンク(jquery):-

http://jsfiddle.net/8LeaP/

javascript - URL の .click のキャプチャ

3 に答える 3

Related

Reference