0

jQuery オートコンプリートをセットアップしましたが、これにはいくつかの特別な要件があります。

  • これは「ユーザー プロファイル」のオートコンプリートであり、各オートコンプリート エントリは次のように _renderItem によってレンダリングされます。

ユーザー名: _firstname_lastname_

電話番号: _clickable_phone_number_

この部分は正常に動作します。

  • 選択すると、すぐに別のページに移動します。window.replace を使用して別のページ (その人のプロフィール) に移動するカスタム選択を使用して、これを達成しました。

これもうまくいきます。

  • 最後に、「_clickable_phone_number_」リンクは別の JavaScript スニペットを呼び出す必要があります。または単にハイパーリンク

最後の部分は、私が問題を抱えているところです。選択するとすぐに別のページに移動するため、このアクションを「防止」する方法がわかりませんでした。

_clickable_phone_number_ に .live を追加して JS を実行することはできますが、プロフィール ページへのナビゲーションを停止することはできません。

私がはっきりしていることを願っています。そうでない場合は、さらに説明できます。

これを達成する方法について誰かが私を助けることができますか? 基本的に、別のページに移動するカスタム select() があるにもかかわらず、カスタム レンダリングされた HTML 内からハイパーリンクするにはどうすればよいですか。

編集: コード スニペットがそれを明確にするかもしれないので、ここに私が意味するものがあります:

私のjQueryオートコンプリートには次のような選択があります：

$('#input').autocomplete({ source: users, minLength: 3,
 select: function(event, ui) 
{ window.location.replace("/profile.asp?id=" + ui.item.value); }

}).data("autocomplete")._renderItem = function (ul, item) { .. }

オートコンプリート レンダリングされた各要素の HTML:

<div class=".ui-menu">
<div class="name">FirstName LastName</div>
<div class="phone">12345</div>
</div>

私はライブイベントを次のように設定しました：

$('.phone').live("click", function() { callPhone($(this).html()); return false; }

4

1 に答える 1

1

http://api.jquery.com/event.stopPropagation/を使用してみましたか

コードを少し変更し、ライブを使用する代わりにオープン イベントで電話リンクを接続する必要があります。

$('#input').autocomplete({ 
     source: users, 
     minLength: 3,
     select: function(event, ui){ 
         window.location.replace("/profile.asp?id=" + ui.item.value); 
     },
     open: function(event, ui){
          $('.phone').click(function(e) { 
              e.stopPropagation();
              callPhone($(this).html()); 
              return false; 
           });
     }
 }).data("autocomplete")._renderItem = function (ul, item) { .. }

.live を使用できなくなった理由は、.live イベントがドキュメントに到達するまで発生しないため、何も停止できないためです。

私はこれをテストしていませんが、動作するはずです。

于 2012-07-26T19:26:43.860 に答える