Question

我有一个应该由ajax处理的按钮，它们应该被委托给它的容器：

jQuery('#container').on('click', 'a', function() {
   if(jQuery(this).hasClass('myButton1') {
      //handle
     return false;
   } else if(jQuery(this).hasClass('myButton2') {
      //handle
      return false;
   }
})

所以我想改善这个：

jQuery('#container').on('click', 'a.sharedClass', function() {
   if(jQuery(this).hasClass('myButton1') {
      //handle
     return false;
   } else if(jQuery(this).hasClass('myButton2') {
      //handle
      return false;
   }
})

你怎么想，它会改进我的代码IF：

我有很多按钮：它是一个新闻流，每个新闻节点都有自己的按钮，如删除，收藏，垃圾邮件，开放式媒体灯箱，投票，查看投票等。
还有其他未被ajax处理的锚点。

Answer 1

这是一个有趣的问题，我通常采用的方法是使用HTML5 data属性。我会使用像data-actionFn = 'delete'这样的数据属性。

<强> HTML

The two below trigger ajax calls onclick

<a href="#" data-actionFn='delete' class='js-ajax'> delete </a>
<a href="#" data-actionFn='vote' class='js-ajax'> vote </a>
....

This does not trigger an ajax call

<a href="#"> do something </a>

<强> JAVASCRIPT

jQuery('#container').on('click', 'a.js-ajax', function (e) {
    e.preventDefault();
    var actionFn = $(this).data('actionFn'); // grab function name

    if (window[actionFn]) {
        window[actionFn]();
    } else {
        // throw Error here
    }
});

function detele(){
    // put code here
}
function favorite(){
    // put code here
}
function spam(){
    // put code here
}
function open(){
    // put code here
}
function media(){
    // put code here
}
function lightbox(){
    // put code here
}
function vote(){
    // put code here
}
function view(){
    // put code here
}

<强> NB：这只是为了让您了解如何实现它。

jQuery容器上的多个委派

1 个答案: