如何在jQuery HTML字符串中包含內聯onclick

Question

我正在嘗試使用html字符串添加內聯onclick事件偵聽器，該字符串正在使用jQuery html方法進行更新，但似乎無法正常工作，

當我檢查元素時，似乎沒有添加任何click事件偵聽器，也沒有看到onclick屬性。

我在這里想念什么嗎，可以幫忙嗎？

 var data = [{ 'a': 1, 'b': 2 }, { 'a': 10, 'b': 3 }]; var str = ''; function sendData(e, data) { console.log(data); } data.forEach(function(item) { str += '<div onclick="' + sendData(item) + '">'; }); jQuery('.container').html(str); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"></div> 

Answer 1

您錯誤地連接了str ：

 var data = [{'a':1, 'b':2},{'a':10, 'b':3}]; var e = 1; var str = ''; function sendData(e, data){ console.log(data); } data.forEach(function(item){ str+="<div onclick=sendData("+ e + "," + JSON.stringify(item) + ")>click</div>"; }); jQuery('.container').html(str); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"></div> 

Answer 2

jQuery通過一種非常清晰易讀的方式jQuery簡化了elements創建和DOM操作：)。

 var data = [{id: 1, title: 'first div', class: 'red'}, {id: 2, title: 'second div', class: 'blue'}]; data.forEach(function(item){ jQuery('<div/>', { id: item.id, onclick: 'callMe(event)', class: item.class, title: item.title, text: 'Div id ' + item.id }).appendTo('.container'); }); function callMe(event){ alert('clicked ' + event.target.id); } 

 .red { color: red } .blue { color: blue } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container">Main Div</div> 

Answer 3

這是一個更好的方法

 var data = [{'a': 1,'b': 2}, {'a': 10,'b': 3}]; data.forEach(function(item,i) { $('.container').append($("<div/>",{ "class":"sendDiv","data-index":i}).text("click")); }); $('.container').on("click",".sendDiv",function() { // delegation console.log(data[$(this).attr("data-index")]); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"></div> 

Answer 4

考慮以下片段

 var data = [{'a':1, 'b':2},{'a':10, 'b':3}]; function sendData(e, data) { console.log(data); } data.forEach(function(item) { var $div = $("<div>").text("Click me!"); $div.click(function(e) { sendData(e, JSON.stringify(item)) }); $(".container").append($div); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"></div> 

這也是一個可行的jsfiddle示例： https ://jsfiddle.net/zL3nghs0/17/

由於jQuery支持創建元素和添加事件處理程序就像使用DOm元素一樣簡單，因此，與使用jQuery將字符串文字串接到元素上相比，這是一種更方便（也是首選的方式）。