jQuery ссылка на (это) не работает?

Question

У меня есть эта HREF связь с текстом либо «attivo» или «не attivo»
Пользователь может установить элемент к «активным» или «закрыто» в базе данных с Ajax запроса $ .post()

I 2 вопроса для них:

1. Я не могу получить ссылку на $ (это), чтобы работать .. Я попробовал его с нормальной связью, и он работает, но не завернут, если/иначе ??

2. Как я могу помешать пользователю нажать несколько раз на ссылку и отправить несколько запросов? Является ли это серьезной проблемой? Мне нужен какой-то небольшой таймер или что-то еще?
   Сначала я думал о яваскрипте сообщения с подтверждением, но это очень раздражает для этой функции ..

HTML:

<dl id='album-list'> 
<dt id="dt-2">some title</dt> 
<dd id="dd-2"> 
    some description<br /> 
    <div class='links-right'>status: <a class='toggle-active' href='#'>non attivo</a></div> 
</dd> 
</dl> 

<a class="test" href="#">test</a> 

JS:

 $('dd a.toggle-active').click(function() { 
      var a_ref = $(this); 
      var id = a_ref.parent().parent().attr('id').substring(3); 
      if (a_ref.text() == "non attivo") { 
       var new_active = "active"; // for db in english 
       $.post("ajax-aa.php", {album_id:id, album_active:new_active}, 
       function(data) { 
        // alert("success"); 
        a_ref.text("non attivo"); // change href text 
       }); 
      } else {     
       var new_active = "closed"; // for db in english 
       $.post("ajax-aa.php", {album_id:id, album_active:new_active}, 
       function(data) { 
        // alert("success"); 
        a_ref.text("attivo"); // change href text 
       }); 
      } 
      return false; 
     });  

     $('a.test').click(function() { 
      var a_ref = $(this); 
      $.post("ajax-aa.php", {album_id:2, album_active:"active"}, 
      function(data) { 
       a_ref.text("changed"); 
      }); 
      return false; 
     }) 

Answer 1

$ (это) должен ссылаться на ваш элемент внутри if/else, но не внутри функции обратного вызова. Функция обратного вызова выполняется в другом контексте, поэтому внутри функции обратного вызова

function(date) { } 

this не относится к элементу. this внутри функции обратного вызова не совпадает с this вне функции обратного вызова. Поскольку функция обратного вызова является закрытием, она сохранит ссылку на вашу локальную переменную a_ref.

Чтобы запретить пользователю, нажав два раза, добавить класс к элементу

$(this).addClass("hasbeenclicked") 

и в обработчик щелчка проверить, было ли это установить и ничего не делать, когда у него есть:

if (! $(this).is(".hasbeenclicked")) { 
    .... 
    } 

Answer 2

Самый простой способ, чтобы остановить пользователя, щелкнув ссылку несколько раз, будет добавлять класс или что-то в ссылку, когда пользователь нажимает на нее.

a_ref.addClass('in-progress'); 

, а затем удалить класс, когда запрос AJAX завершен.

a_ref.removeClass('in-progress'); 

Когда пользователь сначала нажимает на ссылку, проверьте, выполняется ли запрос;

if (a_ref.hasClass('in-progress')) { 
    return' 
}; 

Edit: Более подробный пример:

$('a.test').click(function() { 
    var a_ref = $(this); 


    if (a_ref.hasClass('in-progress')) { 
     return false; 
    } else { 
     a_ref.addClass('in-progress'); 
    } 

    $.post("ajax-aa.php", {album_id:2, album_active:"active"}, 
    function(data) { 
     a_ref.text("changed").removeClass('in-progress'); 
    }); 

    return false; 
})