1

訪問者調査を実行するために、顧客の Web サイトに含まれる JavaScript ファイルがあります。すべてのコードは匿名関数内にあり、アンケート用の HTML を動的に生成する必要があるため、これが問題を引き起こしています。

基本的に、アンケートの HTML は JavaScript を使用して (div として) 生成され、DOM に追加されます。その HTML の一部には、他の関数 (close、submit など) へのハイパーリンクがありますが、匿名関数ラッパー内にある関数を表示できません。この 1 つの部分のためだけに、すべてのメソッドを公開したくありません。動的 HTML を取得して関数を表示する方法はありますか? また、jQueryが使えません。

(function () {
...
function displaySurvey(x) {
        /// <summary>Server callback to display a survey to the user.</summary>
// content is a DIV I added to the DOM using createElement and appendChild
 content.innerHTML += "<div><span onclick='go()' style='cursor:pointer'>Submit</span>&nbsp;<span onclick='closeSurvey()' style='cursor:pointer'>Close</span></div>";

}

function closeSurvey()
{

}
...
}
4

2 に答える 2

2

JavaScript を使用して を作成しelements、 を設定しonclick、 に追加しcontentて、要素がプライベート関数へのハンドルを持つようにする必要があります (クロージャーの性質に合わせて行います)。

これはおおよそあなたがやろうとしていることだと思います( jsfiddle ):

HTML

<div id="div1">
</div>

JavaScript

var content = document.getElementById( "div1" );

(function() {
    function appendSpan() {
        var newSpan = document.createElement("span");
        newSpan.onclick = privateFunction;
        newSpan.innerHTML = "click on me!";
        content.appendChild(newSpan);
    }

    function privateFunction() {
        alert("i am private");
    }
    appendSpan();
}())
于 2013-10-16T23:36:09.667 に答える
0

正しい元の答えから離れることはありませんが、これをやろうとしている人のためのいくつかのヒント：

秘密は、(createElement を使用して) 空の外部 div を作成し、それを innerhtml に設定して作業を開始することであることがわかりました。これにより、すべてのスタイルを 1 つずつ設定する必要がなくなります。大量の内部 div とスタイルを持つ div がある場合、これにより多くの時間とコードを節約できます。次に、要素を手動で作成して、クリック可能なアイテムを追加する必要があります（ createElement を介して、受け入れられた回答に示されているように、作成された要素に onclick を割り当てます）。

ドキュメントに添付されている場所の最大の祖先を追加するまで、id で要素を見つけることができないことに注意してください。そのため、すべてのノードを正しい順序で追加する必要があります。通常、外側の div をドキュメントに追加し、ボタンを追加する要素を見つけて追加します。

もう 1 つは、クリック可能なアイテム (の親) を含むものには += innerhtml を使用できないことです (そうしないと、内側のクリック可能なアイテムの onclick 機能が壊れます)。したがって、動的 html を設定するために必要な適切な内部 div があることを確認する必要があります。html の最後に拡張する必要がある場合は、createElement を介して別の div を追加し、必要に応じてプロセスを続行するために、その innerhtml を適切に設定します。

于 2013-10-18T16:10:27.637 に答える