JQuery - остановить привязку тега к клику

Question

У меня есть следующий код:

//------------------------------------------------------//
// When the document is ready, start firing our AJAX    //
//------------------------------------------------------//
$(document).ready(function() {
    $("#navIndex a").click(function() {
        this.blur();
        return false;
    });
    $("#navPrevNext a").click(function() {
        this.blur();
        return false;
    });

    // Bind actions...
    $("#navIndex a").click(function(e) { e.preventDefault; updateNavigation($(this).attr('href')); });
    $("#navPrevNext a").click(function(e) { e.preventDefault; updateNavigation($(this).attr('href')); });
(); });
});

//--------------------------------------------------------------------------//
// METHODS - Get the params from the page and execute a server side call    //
//--------------------------------------------------------------------------//
function updateNavigation(pageIndex) {
    var filters = $("form").serialize();
    var productGroup = $("#valProductGroup").attr('title');
    var productType = $("#valProductType").attr('title');
    var itemsPerPage = $("#ItemsPerPage").val();
    var menuString = $("#Navigation").html();

    // repopulate the paging menu...
    $.ajax({ url: "/Catalog/Ajax/Update/Navigation"
          , type: 'GET'
          , dataType: 'HTML'
          , data: { productGroup: productGroup, productType: productType, itemsPerPage: itemsPerPage, pageIndex: pageIndex, filters: filters }
          , success: function(results) { $("#Navigation").html(results) }
          , failure: function(results) { $("#Navigation").html(oldMenuString) }
});

    // stop event bubbling... (this is not working as expected?)
    return false;
}

Страница может быть найдена в http://staging1.roomsalive.com/Catalog/Flooring/Hardwood. Навигация по страницам (Первая / Предыдущая / 1/2/3 / Следующая / Последняя) - это то, над чем я работаю. Когда я впервые попадаю на страницу и нажимаю «2» или «3», она ведет себя так, как я ожидаю. Когда меню обновлено, я нажимаю на любую другую жизнеспособную опцию, такую ​​как «3», и она отправляет http://staging1.roomsalive.com/Catalog/Flooring/Hardwood/3 вместо выполнения вызова JQuery. Я на 99% уверен, что это происходит потому, что когда я загружаю документ, я присоединяю события щелчка JQuery к меню. Все же, когда это отправляет назад, те события потеряны. Как мне их повторно соединить? Это проблема?

1010 * ТИА *

Answer 1

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

$("#navIndex a").live('click', function() {
    this.blur();
    return false;
});

Во-вторых, пока вы возвращаете false в методе, который вызывает AJAX, вы не распространяете это значение обратно по цепочке вызовов. Убедитесь, что ваша функция click возвращает результат метода updateNavigation. Или просто верните false.

    $("#navIndex a").live('click', function(e) { e.preventDefault; return updateNavigation($(this).attr('href')); });

Answer 2

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

Вы можете изменить функции успеха и неудачи, чтобы привязать функции к новым элементам после изменения DOM с помощью вызова $.html().

Answer 3

Попробуйте

$("#navIndex a").click(function(e) { 
    e.preventDefault(); 
    updateNavigation($(this).attr('href'));
    return false; 
});
$("#navPrevNext a").click(function(e) { 
    e.preventDefault(); 
    updateNavigation($(this).attr('href'));
    return false; 
});

// удалите эту строку - я добавляю это, чтобы обойти правило минимум 6 символов.