2015-03-04 4 views
0

Допустим, у меня есть ссылки, как этотJQuery пользовательский плагин и все ссылки

<a href="/like/1" class="like">Like</a> 
<a href="/like/2" class="like">Like</a> 

Я пишу JQuery плагин для ajaxify ссылки:

"use strict"; 

define(['jquery'], function($) { 
    $.fn.like_link = function(options){ 
     var opts = $.extend({}, $.fn.like_link.defaults, options); 
     var me = this; 

     //attach ajax 
     this.click(function(e){ 
      e.preventDefault(); 
      $.get(me.attr('href'), function(result){ 
       if (result == 'like'){ 
        me.text(opts.liked_text); 
       }else{ 
        me.text(opts.like_text); 
       } 
      }); 
     }); 

     return me; 
    } 

    $.fn.like_link.defaults = { 
     like_text: 'Like', 
     liked_text: 'Unlike', 
    } 
}); 

и использовать плагин, как:

"use strict"; 

require(['jquery', 'likes/likes'], function($, _) { 
    $('.like').like_link(); 
}); 

Но у этого есть непредвиденное поведение, которое, когда я нажимаю на первую ссылку, фактически посылает url второй ссылки, и ch углы текста всех ссылок.

Вопрос: как я могу сделать событие click изолированным по каждой ссылке?

ответ

0

После консультации с коллегой, управлять целевой ссылку правильно:

"use strict"; 

define(['jquery'], function($) { 
    $.fn.like_link = function(options){ 
     var opts = $.extend({}, $.fn.like_link.defaults, options); 
     var me = this; 

     //attach ajax 
     this.click(function(e){ 
      e.preventDefault(); 
      var link = $(e.target); 
      $.get(link.attr('href'), function(result){ 
       if (result == 'like'){ 
        link.text(opts.liked_text); 
       }else{ 
        link.text(opts.like_text); 
       } 
      }); 
     }); 

     return me; 
    } 

    $.fn.like_link.defaults = { 
     like_text: 'Like', 
     liked_text: 'Unlike', 
    } 
}); 
Смежные вопросы