動的に生成された要素のクリック時に引数を渡す

Question

動的に生成された要素のonclickイベントに引数を渡そうとしています。私はすでに既存のstackoveflowの質問を見てきましたが、私の特定の必要性には答えませんでした。この既存の質問では、$（this）.text（）を使ってデータにアクセスしようとしています。私は私の例でこれを使用することはできません。以下のコードスニペットで

Click event doesn't work on dynamically generated elements

、私はonclickのイベントにプログラムやmacroValに合格しようとしていますが、それは動作しません。

onClickTest = function(text, type) { 
     if(text != ""){ 
     // The HTML that will be returned 
     var program = this.buffer.program; 
     var out = "<span class=\""; 
     out += type + " consolas-text"; 
     if (type === "macro" && program) { 
      var macroVal = text.substring(1, text.length-1); 
      out += " macro1 program='" + program + "' macroVal='" + macroVal + "'"; 
     } 
     out += "\">"; 
     out += text; 
     out += "</span>"; 
     console.log("out " + out); 


     $("p").on("click" , "span.macro1" , function(e) 
     { 
      BqlUtil.myFunction(program, macroVal); 
     }); 

    }else{ 
     var out = text; 
    } 
    return out; 

}アウト私にこの

<span class="macro consolas-text macro1 program='test1' macroVal='test2'">{TEST}</span> 

を与えるの

にconsole.log私はthis.programとプログラムの両方を試してみましたが、それは動作しません。あなたがHTMLに含めるため、

Answer 1

、span要素の値属性を取得します。

$("p").on("click" , "span.macro" , function(e) 
{ 
    BqlUtil.myFunction(this.getAttribute("program"), 
    this.getAttribute("macroVal")); 
}); 

あり、しかし、あなたのコードで間違ったいくつかのこと。

• ます（’、'を使用していない）使用単一引用符が正しくない

• 、outに割り当てられたHTMLで二回

  をclass属性を指定し、属性値の

• 引用符が台無しにされています：属性値に一重引用符または二重引用符を一貫して使用する

var out = "<span class='";

...

out += "' class='macro' program='" + program + "' macroVal='" + macroVal + ;

...

out += "'>";

• あなたがonClickTestをコールする予定回数に応じて、あなたは複数のclickイベント時間で終わる可能性がありANDのアンドラー。