ajaxedページのコンテンツが読み込まれているときに、空きチャンネルのサインアップボタンが表示されない

Question

一部のコンテンツでページにajaxingしています。特定のクラスに基づくコンテンツを持つ中間の列があります。クラスのボタンをクリックすると、たくさんのものが入ってきます。スラックチャンネルボタンは、そのページに属するサポートボックスの一部です。それに加えて、スラックチャンネルにサインアップするボタンがあります。これはhere.

から取られるそれはHTMLで次のようになり、このブロックは、ページが最初にボタンが罰金を示してロードすると

<div class="support box"> 
    <span class="title">Support</span> 
    <p> 
    Are you haveing trouble? Visit our workshop FAQ page or send us an email and we'll get back to you as soon as possible. 
    <br /> 
    <br /> 
    <a href="/faq" class="changeColor">Frequently Asked Questions</a> 
    <br /> 
    <a href="mailto:....com" class="changeColor">...url....com</a> 
    </p> 
    <p>Join the conversation on slack</p> 
    <div id="slackin-div"> 
    <script src="https://...url....com/slackin.js?large"></script> 
    </div> 
</div> 

をロードされているページ上で来ています。私はそれが自分のURLでajaxedになっているページを表示する場合は、ボタンが正常に表示されます。しかし、いったん私はajaxボタンのコンテンツが表示されません。私は "eval（）"を使ったいくつかの記事を見つけましたが、私がやっているのはこのスクリプトタグを追加して、実際にはページのファイル内の関数からjを実行していないからです。評価するものがあると思う。

誰かが、このページがajaxされた後にこのボタンを表示し続けることができます。私はdivに追加しようとしましたが、ボタンはまだ表示されませんでした。

Answer 1

scriptタグが文字列として "ajaxed"ではなく、DOMが理解できる要素であることを確認する必要があります。これにはプレーンなJavascriptを使用できます（createElement()）。 AJAXリクエストをシミュレートするタイムアウトの例を次に示します。これはではなく、はjQueryのappend()と一緒に動作します。これは文字列としても挿入されるためです。

const slackin = 'http://slack.yourdomain.com/slackin.js'; 

// Create script element. 
let script = document.createElement('script'); 
    script.src = slackin; 

// Insert the element in a target element. 
document.querySelector('#target').appendChild(script);