0

以下の状況を解決したいです。

クリックイベントがあるリンクがあります（いくつかのajax操作を行います）。クリック アクションは、リモート アクション (javascript の実行) を実行するデフォルトの Rails です。次のhtml構造でli要素がクリックされたときに、クリックイベントでこれを呼び出したい:

<li>
   <img src="images/img.png" />
   <a href="/remote/path" data-remote="true">Link</a>
</li>

li 要素のクリックは、リンクのクリック イベントでトリガーされ、他の関数を呼び出す必要があります (li 要素にアクティブなクラスを設定します)。

問題は次のとおりです: 1. クリック イベントを li にバインドし、クリック イベントをリンクに呼び出すと、無限ループが発生します 2. リンクに stopPropagation() を配置すると、元の関数が呼び出されません。リモートリクエストを実行します

これに対する最もエレガントなソリューションは何でしょうか?

私が現在持っているjcodeは次のとおりです。

$(document).ready(function() {
    $("#some_list a").click(function(e) {
        alert("action on a");
        e.stopPropagation();
    });

    $("#some_list li").click(function(e) {
        alert("call some function");
        $(this).find('a').trigger("click");
    });
});

これにより再帰ループが発生することはありませんが、リンクでトリガーしたいデフォルトのアクションが妨げられます (レールまたは ujs ライブラリによって設定されます)。

リンクのクリック アクションの順序を変更し、リンクの最後のアクションの後に stopPropagation() を変更する必要があると思いますか?

それとも、HTML を再構築して自分でリモート関数を呼び出すことで、より良い解決策があるのでしょうか?

手伝ってくれてありがとう

4

1 に答える 1

0

window.location = 'anyurl' または ajax を実行することもできます。このようなことを試してください

$(function(){
 var myobj = {
 clickedLi: function(){
      alert('clicked on li');
      return this; 
 },
 sendAnchor: function(url){
    alert(url);
    return this;
 }                                   
};

$('ul').on('click', 'li', function(e){
e.preventDefault();
myobj.clickedLi().sendAnchor($(this).find('a').attr('href'));

});
});

ここに実例があります http://jsbin.com/oVAWEdob/2/edit

于 2013-11-21T18:27:13.807 に答える