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

Question

У меня есть эта ссылка href с текстом "attivo" или "non attivo"Пользователь может установить для элемента значение «активный» или «закрытый» в базе данных с помощью ajax-запроса $ .post ()

У меня есть 2 вопроса к ним:

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

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

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

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

    function(date) { }

this не относится к элементу a. 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'
};

Редактировать: более подробный пример:

$('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;
})