Javascriptを使用してHTMLを挿入する

StackOverflow https://stackoverflow.com/questions/1932131

  •  20-09-2019
  •  | 
  •  

質問

JavaScript を通じて次の HTML 行をドキュメントに挿入する必要があります。

<button type='button'>btnName </button>

これに加えて、呼び出される関数が引数を必要とするボタンに onclick を登録する必要があります。 'arg' したがって、JavaScript は次のようになります。

var html = "<button type='button' onclick='+ fnName +
    "(the param shld go here)'>" + btnName + "</button>"

どうすればこれを達成できますか?明らかな解決策の 1 つは、ボタンに ID を割り当て、HTML がドキュメントに追加された後でクリック関数を登録することです。しかし、ボタンが多すぎるのでこれはやりたくないです。他に考えられる選択肢はありますか。

追加：関数名は動的であり、 'arg' 入るものもダイナミックです。ID が必要な場合は、自動生成する必要があります。

**

解決策はありますので、以下を参照してください

**

役に立ちましたか？

解決 6

アイブ氏は、解決策を得た： - 

var html = "<button type='button' onclick='"+ fnName +"("+ JSON.stringify(data) +")'>"+ btnName + "</button>"

他のヒント

私はjqueryのをお勧めします。

のようなもの。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script>
$(document).append(
  $("input")
  .attr("type", "button")
  .click(function(){
    doSomething()
  ))
);
</script>

あなたは、HTML属性としてonclickを使用しないでください。その代わり、DOMインタフェースを介してプログラムでボタンを作成し、プロパティとしてイベントを添付します。

var button       = document.createElement("button");
button.type      = "button";
button.innerHTML = btnName;
button.onclick   = function() {
    window[fnName](data);
};

// Insert the button into whatever container node you are populating
someContainerNode.appendChild(button);

またはバンドワゴンが起こっているところからjQueryの方法があります：

$("<button type='button'>" + btnName + "</button>").click(function() {
    window[fnName](data);
}).appendTo(someContainerNode);

また、あなたは文字列としてonclickハンドラを設定していないので、あなたはパフォーマンスが向上しますJSON文字列のために、関数の引数dataを変換する必要はありません。

あなたはその変数のためのdocument.writeを使用することができます。 VARのhtml =のdocument.write（ '' + btnName + ''）。単一引用符と二重引用符を修正してください。私は、これは便利です知らないあなたのためか、

あなたは、個々のボタンにイベントをバインドしたくない場合は、

、あなたはすべてのそれらのボタン（例えば、例えばボタンを保持している親のdiv）の親に一つのイベントをバインドした後、同様のを達成するためにイベントバブルを使用することができます効果。

例えばます。

<div id="parent">   
   <button id="b0">text</button>
   <button id="b1">text</button>
   <button id="b2">text</button>
   <button id="b3">text</button>
   <button id="b4">text</button>
   <button id="b5">text</button>
</div>
<script>
   $("#parent").click(function(e){
       if ($(e.target).attr("id") === "b0") {
          // do b0's stuff
       } else if ($(e.target).attr("id") === "b1") {
          //do b1's stuff 
       } //etc 
   });
</script>
彼らは基本的に何をしている -

それを行うための別の方法は jqueryのライブイベントを使用することです私は（もっとエレガントのコース）の上に書かれています。引数については、どのように最初の場所で引数を取得できますか？それを知らずに、私は本当にあなたが前方に最善の方法を教えカントます。

通常の方法では onclick メソッドを割り当てたくないため、遠回りな方法としては、それらすべてに一意の識別番号を持つ関数を呼び出すようにすることです。関数には引数を持つ 2 次元配列が含まれます。これは、すべてのボタンが異なるパラメーターを使用して同じ関数を呼び出すことを前提としています。

編集： 誤解しているかもしれませんが、ここにコードがあります ない 最近のプロジェクトで使用した jQuery を使用します。

for(var place = 0; place < 5; place++)
        {
            if(document.getElementById('title_'+ place).addEventListener)//this is for compatablity
                document.getElementById('title_'+ place).addEventListener('click', function(e){/*some code*/});
            else if(document.getElementById('title_'+ place).attachEvent)
                document.getElementById('title_'+ place).attachEvent('onclick',  function(e){/*some code*/});
            else
                document.getElementById('title_'+ place) = function(e){/*some code*/};
        }

このコードは、onClick イベントを 5 つのオブジェクトに追加し、現在のブラウザでどのメソッドが機能するかをチェックするため、(私がテストした限りでは) 主要なブラウザをサポートしています。

読みやすくするために一部のコードを抜粋しましたが、それは呼び出される関数内のコードにすぎませんでした。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top