Как связать события с элементами DOM, которые обновляются Обновлено

У меня есть сайт BackboneJS прямо сейчас, но столкнулся с проблемой. У меня есть один Backbone View, который использует обработчик события jQuery.click(). Прямо сейчас у меня есть обработчик, настроенный глобально внутри функции $ (document) .ready(). Тем не менее, я понял, что если я загружу страницу, которая использует обработчик 1-го, то все будет работать нормально, но если я сменю страницы (измените представление, которое отображается на главной линии), а затем вернитесь к исходной странице (обновите DOM, который использует обработчик), то события больше не срабатывают. Как я должен справиться с этим? Это должно быть проблемой, с которой сталкиваются многие люди, поэтому я предполагаю, что у Backbone есть способ справиться с этим.Как связать события с элементами DOM, которые обновляются Обновлено

В противном случае, мой план состоял в том, чтобы просто вызвать функцию после визуализации представления для сброса обработчиков. Будет ли это лучшим способом, или у позвоночника есть способ справиться с этим?

$(document).ready(function(){ 
    $('.section-pulldown').on('click', function(){ 
     var el = $(this).next(); 
     var par = $(this).parent(); 
     var arrow = $(this).children('img'); 

     if (el.css('display') == 'none') { 
      el.css('padding-bottom', '50px'); 
      arrow.attr('src', 'images/downarrow.png'); 
      par.css('box-shadow', '0px 0px 15px 3px #A8A8A8 inset'); 
      $(this).next().slideToggle(700); 

     } 
     else { 
      $(this).next().slideToggle(700, function(){ 
       el.css('padding-bottom', '0px'); 
       par.css('box-shadow', '2px 2px 15px 2px #CCCCCC inset'); 
       arrow.attr('src', 'images/uparrow.png'); 
      }); 

     } 

    }); 
})

источник

2013-05-27 Matt Hintzke

Я думаю, что вам нужно [делегированные события] (http://api.jquery.com/on/#direct-and-delegated -events) – millimoose

плохо смотреть –

oh делегированные просто означает иметь селектор ... у меня уже есть это. Посмотрите мое обновление –

Попробуйте что-то вроде:

$(function() { 
    $(document).on('click', '.section-pulldown', function(e) { 
     var el = $(this).next(); 
     var par = $(this).parent(); 
     var arrow = $(this).children('img'); 

     if (el.css('display') == 'none') { 
      el.css('padding-bottom', '50px'); 
      arrow.attr('src', 'images/downarrow.png'); 
      par.css('box-shadow', '0px 0px 15px 3px #A8A8A8 inset'); 
      $(this).next().slideToggle(700); 

     } 
     else { 
      $(this).next().slideToggle(700, function(){ 
       el.css('padding-bottom', '0px'); 
       par.css('box-shadow', '2px 2px 15px 2px #CCCCCC inset'); 
       arrow.attr('src', 'images/uparrow.png'); 
      }); 

     } 

    }); 
})

См jQuery .on as a delegate

источник

2013-05-27 18:18:23 SpYk3HH

Как связать события с элементами DOM, которые обновляются Обновлено

ответ

Смежные вопросы