Как вызвать функцию jquery после изменения html

Question

Я пытаюсь понять, почему моя функция перестала работать после того, как я изменил код html.

У меня есть DIV:

<div class="float"> 
<div class="box" data-speed="3" data-direction="X"><h1>Hola</h1></div> 
<div class="box" data-speed="2" data-direction="X"><h1>chau</h1></div> 
</div> 

И код JQuery:

$(function() { 
    $('.box').moveIt(); 
});  
//move elements in different speeds 
$.fn.moveIt = function() { 
    var win = $(window); 
    var it = $(this); 
    var instances = []; 

    $(this).each(function(){ 
     instances.push(new moveItItem($(this))); 
    }); 

    $('.parallax').on('scroll', function() { 
     instances.forEach(function(inst){ 
      var wrap = inst.el.parents('.float'); 
      var scrol = win.scrollTop()-wrap.offset().top; 
      inst.update(scrol); 
     }); 
    }); 

} 

var moveItItem = function(el){ 
    this.el = $(el); 
    this.speed = parseInt(this.el.attr('data-scroll-speed')); 
    this.direction = this.el.attr('data-direction'); 
}; 

moveItItem.prototype.update = function(scrollTop){ 
    var pos = scrollTop/this.speed; 
    this.el.css('transform', 'translate'+this.direction+'(' + -pos + 'px)'); 
}; 

ОК, пока здесь все не работает, когда я перечисляю элементы .box перевод соответственно.

Но теперь я пытаюсь изменить HTML в классе .float после Ajax вызова

//after ajax 
$.ajax({ 
    url: 'do_content.php' 
}).done(function(result) { 
    //result = <div class="box" data-speed="3" data-direction="X"><h1>Como estas?</h1></div> 
    $('.float').html(result); 
}); 

После, когда я выстрелил свитка снова функция появляется смотреть сломаны, и я получил это сообщение:

Uncaught TypeError: Cannot read property 'top' of undefined 
    at http://localhost/ophelia/public/js/control.js?v=1487219951:197:45 
    at Array.forEach (native) 
    at HTMLDivElement.<anonymous> (http://localhost/ophelia/public/js/control.js?v=1487219951:195:13) 
    at HTMLDivElement.dispatch (http://localhost/ophelia/public/utilities/jquery/jquery-3.1.1.min.js:3:10315) 
    at HTMLDivElement.q.handle (http://localhost/ophelia/public/utilities/jquery/jquery-3.1.1.min.js:3:8342) 

Я понимаю, что это сообщение появляется только в том случае, если я меняю элементы с классом .box (я попытался изменить только h1, и он не сломается, но я хочу изменить все, чтобы изменить также скорости)

Как я могу перезапустить функцию?

Я пытался вызвать его снова $('.box').moveIt();, но все еще получаю ту же ошибку

Я знаю, что это длинный вопрос, но не нашли другой способ, чтобы объяснить мою проблему

Answer 1

Как уже отмечалось (но, возможно, не так ясно), проблема в том, что вы прикрепляете обработчик событий, используя элементы, существующие на странице в определенный момент времени (я думаю, что для instances var). Затем вы их заменяете, но ваш обработчик уже установлен на прокрутку для элемента с классом .parallax и уже зарегистрирован с использованием этого экземпляра instances и так далее.

Один из способов - переписать код, используя методы делегата.

От http://api.jquery.com/on/

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

делегированного событие имеет то преимущество, что они могут обрабатывать событие от потомков элементов, которые добавляются к документу в более позднее время

Подхода событий делегации придает обработчик событий только один элемента, TBODY, и это событие нужно только пузырем на один уровень вверх (от щелкнул тр к TBODY):

$("#dataTable tbody").on("click", "tr", function() { 

    console.log($(this).text()); 

}); 

Но это может быть сложным, как вы должны глубоко перестроить свой код.

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

$(function() { 
    $('.parallax').moveIt(); 
}); 

//move elements in different speeds 
$.fn.moveIt = function() { 
    var win = $(window); 
    var it = $(this); 
//REMOVED 
//var instances = []; 


// $(this).each(function(){ 
//  instances.push(new moveItItem($(this))); 
// }); 

    $(this).on('scroll', function() { 
     $('.box').each(function(){ 
      var inst=new moveItItem($(this)); 
      var wrap = inst.el.parents('.float'); 
      var scrol = win.scrollTop()-wrap.offset().top; 
      inst.update(scrol); 
     }); 
    }); 

} 

...... and so on 

Answer 2

Это происходит потому, что HTML-элемент привязан к слушатель был заменен. Как здесь fiddle здесь .. Предупреждение работает, но после изменения html это не так. Это связано с тем, что старый элемент был заменен новым элементом.

Вы можете использовать функцию on в JQuery, чтобы пройти это, как в этом fiddle

Answer 3

можно связать событие на div.float и пройти через element.children двигаться каждый .box