2012-05-19 2 views
0

Я не могу понять, что не так с моим кодом. У меня есть пара глобальных переменных, которые я меняю каждый раз, когда нажимается какая-то определенная кнопка, есть также несколько пользовательских функций, которые выполняют вызовы ajax, которые возвращают кусок html-кода с разбиением на страницы ниже, который работает следующим образом:Javascript: дублирование событий

$('#foot #pagination a.page').live('click', function(){ 
     window.mode = 'partial';   
     window.key = $('input#search').val();   
     window.page = $(this).parent().find('input').val(); 
     setTimeout('getData();', 0);   
    }); 

иногда при переходе на другое событие страницы удваивается, и я получил удвоенный html. при калибровке getData(); с консоли браузера - все работает отлично, как будто оно должно работать. Что может быть причиной этого?

+2

** Никогда ** передайте строку 'setInterval()' или 'setTimeout()'. Это так же плохо, как использование 'eval()', и это приводит к нечитаемому и, возможно, небезопасному коду, как только вы используете переменные, так как вам нужно вставить их в строку вместо передачи фактической переменной. Правильным решением является 'setInterval (function() {/ * ваш код *)}, msecs);'. То же самое относится к 'setTimeout()'. Если вы просто хотите вызвать одну функцию без каких-либо аргументов, вы также можете передать имя функции напрямую: 'setInterval (someFunction, msecs);' (обратите внимание, что в имени функции нет ** ** '()') – ThiefMaster

+0

спасибо за примечание –

ответ

0

Проблема заключалась в том, что JQuery .live() толкает некоторые данные в JQuery стек на документ готов, но после того, как AJAX приходит ответ от сервера и документ, готовый событие вызывается снова - в этом случае .live() снова выдает те же данные в стек jQuery, который затем вызывает несколько вызовов тела тела.

Я использовал .die() до .live(), и все теперь прекрасно работает.

+1

«после того, как ответ ajax приходит с сервера, и событие готовности к документу вызывается снова» - ** no **, 'document.ready' не вызывается снова в ответе ajax. Вы снова вызываете '.live' снова из' getData' или из любой другой функции, которую он вызывает? – bfavaretto

+0

да, DOM.ready загружает новую группу обработчиков событий, где .live загружается снова, вы правы, на самом деле это было ошибкой. –

0

Вы должны выполнить эту функцию только один раз после document.ready. Или что-то вроде этого:

$('#foot').off('click', '#pagination a.page', navigation) // remove event 
      .on('click', '#pagination a.page', navigation); // add event 

function navigation(e) { 
    window.mode = 'partial';   
    window.key = $('input#search').val();   
    window.page = $(e.currentTarget).parent().find('input').val(); 
    setTimeout('getData();', 0);   
});