htmlの変更後にjquery関数を呼び出す方法

Question

htmlコードを変更した後、私の関数がなぜ機能しなくなったのか理解しようとしています。

私はdivの持っている：私は要素.boxに応じて変換をスクロールすると、ここですべてが、作業まで

$(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)'); 
}; 

OK：

<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コードを。

しかし、私はスクロールを発射した際に再び機能が壊れて見えるように表示され、私はこのメッセージを得た後に、今私は、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); 
}); 

後にクラス.floatでHTMLを変更しようとしています：

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();で再びそれを呼び出そうとしましたが、それでも私は知っている同じエラーに

を得ることが長い質問ですが、html要素がに結び付けられているため、この問題が発生した私の問題

Answer 1

がすでに指摘（しかし、そうでないかもしれないので、移動するelement.childrenて行くことができますクリア）、問題は、特定の瞬間にページに存在する要素を使用してイベントハンドラをアタッチすることです（私はinstances varと思う）。次にそれらを代用しますが、あなたのハンドラはクラス.parallaxを持つ要素のスクロールに既に設定されており、そのインスタンスinstancesなどを使って既に登録されています。

1つの方法は、デリゲートメソッドを使用してコードを書き直すことです。 http://api.jquery.com/on/

イベントハンドラから

のみが現在選択されている要素にバインドされています。コードが.on（）を呼び出すときには が存在する必要があります。

委任イベントは、彼らは

イベント委任アプローチは一つだけ 要素、tbody要素にイベントハンドラをアタッチし、後で文書に追加され 子孫要素からのイベントを処理することができるという利点を持っています

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

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

}); 

しかし、あなたは深くあなたのコードを再構築すべきであるように、それは複雑になる可能性がありますし、（TBODYにTRクリックから）イベントが唯一最大のバブルに1つのレベル を必要とします。

は、そうでない場合は、次のようにあなたがあなたの関数を書き換える可能性が（すみません、私はフィドルをすることはできません）

$(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

を説明するための別の方法を見つけるのdidntリスナーが交換されました.. このfiddleのように..アラートは機能しますが、htmlが変更された後はアラートは機能しません。これは、古い要素が新しい要素で置き換えられたためです。

は、あなたにはこのような乗り越えるためにjQueryのでon機能を使用することができ、このfiddle

Answer 3

あなたはdiv.float上のイベントを結合して、すべての.box