JQuery нажмите дважды - PullRequest
       1

JQuery нажмите дважды

2 голосов
/ 24 октября 2010

Код:

$(".box-collapse").live("click",function(){
    if(updating()) return false;
    var b = $(this).parent().parent();
    b.find(".album-div").stop(true,false).slideToggle();
    $.ajax({
        url: addNonce($(this).attr("href")),
        success:function(data){
            c = b.attr("id");
            var resp = $('<div />').html(data);
            var col = $("#"+c+" .box-collapse");
            var ncol = resp.find("#"+c+" .box-collapse");
            col.html(ncol.html());
            col.attr('href',ncol.attr('href'));
            resp.remove();
            clearUpdate(data);
            wait = false;
        }
    });
    return false;
});

Этот клик дважды срабатывает.

Что происходит:

  • Нажмите, чтобы свернуть, и он отправит ответ, чтобы спасти этот крах.
  • Нажмите еще раз, чтобы развернуть, и он отправит просьба сохранить расширение.
  • Нажмите еще раз, чтобы свернуть, и это выстрелил дважды (оставив его развернутым, но коллапс сохраняется).
  • Нажмите еще раз, и он выстрелит 4 раза.

Это только начинает многократный выстрел ПОСЛЕ второго щелчка. Это сбивает с толку меня.

Если я уберу обслуживание данных, оно не сработает дважды. Что я делаю не так на сервисе? (т.е. я оставляю только wait = false в success)

Другие функции, которые я использую в этом вызове:

function updating(){
    if(!wait) {
        $("#loading").html('Updating...');
        wait = true;
        return false;
    }
    else {
        $("#loading").html('Slow down...');
        return true;
    }
}

function clearUpdate(data){
    var resp = $('<div />').html(data);
    //alert(resp.find("#nonce").val() + " "+$("#nonce").val());
    $("#loading").html(resp.find("#loading").html());
    if(typeof(resp.find("#nonce").val()) == 'undefined'){
        alert(data);
        $("#loading").html("Fatal error. Your session could have ended. <a href='javascript:location.reload()'>Refresh</a>");
        resp.remove();
        return false;
    }
    else if(resp.find("#errorcode_").val() == "refresh"){
        location.reload();
    }
    resp.find(".image-box").each(function(){
        $("#"+$(this).attr("id")).find(".image-count").html($(this).find(".image-count").html());
    });
    $("#nonce").val(resp.find("#nonce").val());
    wait = false;
    resp.remove();
}

Флаг wait запрещает отправку запроса до тех пор, пока последний не будет обслужен. Я делаю это, потому что я отслеживаю одноразовый номер, и мне нужно получать новый одноразовый номер после каждого запроса.

Опять же, если я уберу обслуживание данных, оно будет работать нормально. Но мне нужно обслужить данные, чтобы получить новый одноразовый номер.

Плюс, я не вижу, чтобы он нигде не падал. Любая помощь будет отличной. Я выложу любые другие функции, если это необходимо. Мой полный сценарий довольно большой.

Вот HTML-код родительского элемента .box-collapse:

    <div class='box image-box album-marker-visible image-box-w-20 image-box-list-0' id='portrait'>
    <h2 class='box-header image-box-header'>
    <input type='checkbox' name='albums[portrait]'>
    <span class='image-box-header-move'>
    <span class='image-album-number'>1</span>. Portrait <input type='hidden' class='image-album-anchor' value='portrait'>
    <input type='hidden' class='image-album-portfolio' value='1'>
    <span class='image-count'>(20)</span>
    <span class='box-mover'>Move to: <a href='images?n=bridals,weddings,engagement,portrait&port=2&nonce=I8FX2BH841' title='Move to Wedding Portfolio'>Wedding Portfolio</a>&nbsp;Move: <a href='images?n=story,portrait,capture,press,concerts&port=1&nonce=I8FX2BH841'>down</a></span></span>
<span class='album-marker'>&nbsp;|&nbsp;<a href='images?ia=3&action=hide&nonce=I8FX2BH841' title='Mark album as hide' class='album-mark-hide album-mark'>hide</a></span>
<a class='box-mover-show box-collapse' href='images?expand=portrait&nonce=I8FX2BH841' title='Expand Portrait'>expand</a></h2> 

Существует несколько экземпляров .box, и я не отображал содержимое после тега h2 (поэтому мой div не закрыт).

По запросу, это пошаговый процесс того, что ДОЛЖНО происходить:

  • Я нажимаю свернуть на экземпляре .box-collapse. Он отправляет href.
  • jQuery переключает слайд.
  • При обратном звонке я получаю новый href по ссылке, которую я только что нажал. Он должен был изменить строки запроса с expand=an_album на collapse=an_album или наоборот. Я также изменяю состояние с «развернуть» на «свернуть». Я ищу ответ на основании идентификатора содержащего .box, который я только что нажал. Я получаю правильный ответ (развал изменится, чтобы развернуться), но jQuery slideToggles дважды.
  • В clearUpdate() я обновляю свой nonce из полученных данных. Если я не получу одноразовый номер, я умру. Я также обновляю количество изображений для каждого .box.

Я поместил предупреждение в случае успеха, и при первом щелчке я получаю одно предупреждение. Нажмите еще раз, я получаю одно предупреждение. Нажмите ТРЕТЬЕ время, я получу два предупреждения. В четвертый раз 4 оповещения.

Я также сделал alert($(".box-collapse").length); в моем clearUpdate(), и размер не меняется.

Ошибка заключается в функции успеха и / или clearUpdate. Поскольку я получаю тот же HTML-код, который у меня уже есть (за исключением изменений выше), возможно ли, что я повторно анализирую javascript и повторно привязываю клик? Но это не представляется возможным, потому что я должен стрелять несколько раз после первого щелчка. Обновление Я добавил предупреждение в $(document).ready() и получаю предупреждение каждый раз, когда получаю ответ. Таким образом, это повторный анализ JavaScript и повторное связывание клика. Моим немедленным решением будет изменить его на: $(".box-collapse").die("click").live("click",function()), но я добавлю запрос, чтобы отключить заголовок javascript.

Спасибо за помощь!

1 Ответ

1 голос
/ 24 октября 2010

Скорее всего, это создает событие второго щелчка, если данные содержат класс .box-collapse

var resp = $('<div />').html(data);

Вам действительно нужен селектор классов? Идентификаторы должны быть уникальными это делает b.html () == $ ("#" + c + ".box-collapse"). html () и b == col [0]

var col = $("#"+c+" .box-collapse");

Это беспокоит. Это означает, что внутри resp есть элемент с таким же идентификатором, что и внутри b. Скорее всего, при переключении на клик из живого события происходит событие щелчка случается дважды.

var ncol = resp.find ("#" + c + ".box-collapse");

Слишком мало известно о содержании .box-collapse или данных, чтобы понять

col.html(ncol.html());
col.attr('href',ncol.attr('href'));

Теперь я думаю, что наконец понял.

Измените данные, чтобы они содержали объект JSON или более простую структуру HTML, и они должны работать следующим образом.

Хороший пример

 data == { "innerText":"expand", "url":"images?expand=portrait&nonce=I8FX2BH841" }

 col.html(data.innerText);
 col.attr('href', data.url);

Плохой пример

ответ сервера:

data == <span class="innerText">expand</span><span class="url">images?expand=portrait&nonce=I8FX2BH841</span>

var div = $("<div />").html(data);
col.html(div.find(".innerText").html());
col.attr(div.find(".url").html());

и настройте функцию clearUpdate

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...