Question

我想解决以下问题：

我有一个链接，它有一个on click事件（它执行一些ajax操作）。单击操作是默认的Rails，它将执行远程操作（执行javascript）。当使用以下html结构单击li元素时，我想在click事件上调用它：

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

单击li元素应该触发链接上的click事件并调用其他一些函数（在li元素上设置活动类）。

问题在于： 1.如果我在li上绑定click事件并在链接上调用click事件，则会导致无限循环 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");
    });
});

这不会导致递归循环，但它会阻止我想在链接上触发的默认操作（由rails或ujs库设置）。

我想我必须更改链接上的点击操作的顺序，并在链接上的最后一个操作后更改stopPropagation（）？

也许有一些更好的解决方案，重组HTML并自己调用远程功能？

感谢您的帮助

Answer 1

你也可以做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

事件冒泡和链式事件的委派

1 个答案: