リロード/私の問題を実証するためのjQuery要素

Question

を再検索し、ここで私は小さなデモスクリプトがあります：=

/user.html =

<div id="user-box"></div> 

JSを

class UserComponent { 
    constructor({}) { 
    this.srcFile = "/user.html"; 
    this.parentBox = $("#container-box"); 

    this.childBox = $("#user-box"); 
    }; 

    show(){ 
     this.parentBox.load(this.srcFile, function() { 
      this.childBox.html("<p>Hello</p>") 
     }.bind(this)); 
    }; 
} 

問題は、この回線が正しく動作しないことです。

this.childBox.html("<p>Hello</p>") 

問題は、this.chilBoxがコンストラクタで参照されても、DOMにはまだ存在しないということです。

私は私のコードを書き換えるとき：

 this.parentBox.load(this.srcFile, function() { 
      var childBox = $("#user-box"); 
      childBox.html("<p>Hello</p>") 
     }.bind(this)); 

そして、それが動作します。しかし、私はコンストラクタ内の要素を参照したいと思います。

コンストラクタ内の要素を参照して、後でそれを使用する方法はありますか？

私はthis.childBox.find().html("<p>Hello</p>")を試しましたが、このように動作しませんでした。

ありがとうございました！

Answer 1

新しいUserComponentを作成するときにDOMが完了するように、あなたは、$（ドキュメント）.ready以内にUserComponentクラスを初期化することができ、この

this.childBox.html($("<p>Hello</p>"))

代わりの

this.childBox.html("<p>Hello</p>")