將參數傳遞給動態生成元素的單擊事件

我試圖將參數傳遞給動態生成元素的onclick事件。我已經看到了現有的stackoveflow問題，但它沒有回答我的具體需求。在這個存在的問題中，他們試圖使用$（this）.text（）來訪問數據。但我不能在我的例子中使用這個。將參數傳遞給動態生成元素的單擊事件

Click event doesn't work on dynamically generated elements

在下面的代碼片段，我試圖通過程序和macroVal到onclick事件，但它不工作。

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;

};

的執行console.log出來給我這個

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

我曾經嘗試都this.program和程序，但它不能正常工作。

來源

2017-02-15 user911

獲取屬性span元素的值，因爲你將它們包含在HTML：

$("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事件^ h p span.macro。

來源

2017-02-15 15:14:12 Igor

我已經移動了onClickTest之外的偶處理程序代碼。後來我意識到，如果我把它放在函數內部，我的函數根本沒有被觸發，只有onkekevent被觸發。你能給我一個如何傳遞參數的示例代碼片段嗎？ – user911

@ user911 - 是的，我將它添加到我的答案中。您正在生成不正確的HTML。在返回之前調用'console.log（out）;'仔細檢查結果。 – Igor

您的回答幫助我解決了我的html引用問題，但我仍然無法通過參數。我已經提出了你的答案，但仍然不能接受。我已經嘗試了這個。程序和程序。它不起作用。我也更新了我的問題以解決報價問題，請檢查。 – user911

將參數傳遞給動態生成元素的單擊事件

回答

相關問題