0

サーバー上で数秒ごとにhtmlのチャンクを生成し、jQueryメソッド.html（）を使用してUIに表示します。

    $('#contentContainer').html(JSON.parse(htmlString));

挿入されたhtmlが正しく表示されます。

ただし、このhtmlコードを操作するjavascript関数もいくつかあります。たとえば、1つはdiv要素に接続されています。

$("#startStop").click(function () { ..});

ツールチップをブートストラップするもう1つの方法：

    $(function () {
        $("[rel='tooltip']").tooltip();
        $(".errorTip").tooltip();
    });

問題は、サーバーからのhtmlをdiv要素に入力すると機能しなくなることです。

要素が正しいIDで作成されていることがわかります。

    <div id="startStop" data-toggle="button" class="sbClickable btn active">
    ....
    </div>

唯一の違いは、Chromeでソースコードを開くと、生成されたhtmlがそこにないことです。

ページにコードをロードする手順は次のとおりです。

  1. page.chtmlファイルが読み込まれます

  2. page.chtmlに空のdivがあります

    <div id="contentContainer">
</div>

  3. 次に、page.chtmlで、コンテナにデータを入力するメソッドを呼び出します。メソッドは外部の.jsファイルにあります

    <script type="text/javascript">
    einzelaktion.populateHtml();
</script>

  4. PopulateHtmlで、サーバーにajaxリクエストを送信します。データが取得されたら、divを空にして、新しいデータを入力します。

    $('#contentContainer div').empty();
$('#contentContainer').html(JSON.parse(htmlString));

  5. 同じ外部.jsファイルに問題があるメソッド。

コンテナにデータを取り込むメソッドをpage.chtmlに移動しようとしましたが、役に立ちませんでした。

また、ページが簡単に読み込まれるときにコンテナ要素を作成しようとしたため、page.chtmlの他の要素と一緒に作成され、ページソースに表示されます。この場合、サーバーを最初に呼び出してdivのhtmlを置き換えるまで、すべてが正しく機能します。

私は同様の問題をグーグルで検索しましたが、私の問題に近いものは見つかりませんでした。

私は何かが恋しいですか？

4

2 に答える 2

2

変化する

$("#startStop").click(function () { ..});

に

$("#contentContainer").on('click', '#startStop', function () { ..});

このように、idstartStopを持ち、バインディング関数を呼び出した後に作成される要素は、クリックイベントを受け取ります。

于 2013-03-20T11:18:16.943 に答える
0

HTMLが既にロードされた後でDOMに追加する場合は常に、jQueryのon（）関数を使用してバインドを作成する必要があります...

例えば、 $(".newDiv").on('click', function() { alert('clicked dynamic HTML!')});

于 2013-03-20T11:19:16.740 に答える