如何通過jQuery追加HTML元素？

Question

我使用jquery從jquery中添加了帶有onclick函數的html內容，但是我的內容無法正確呈現，請幫助我解決此問題。

我的代碼是

 $.each(_fileName, function (i, item) {
                imgTag += "<div class='DivColumn-6'>";
                imgTag += "<img src=" + _ImgPath + "Icons/" + _fileName[i]['SenIcon'] + ".jpg class='imgSenIcons'/>";

                imgTag += "<span class='spnSensorName' onclick=calSensorPage('" + _fileName[i]['SenFnCal'];
                imgTag += "','" + _fileName[i]['SensorNmtxt'];
                imgTag += ");>" + _fileName[i]['SensorNmtxt'];
                imgTag += "</span></div>";
            });

            $("#divSensorMnu").append(imgTag);

輸出是這樣的渲染：

<span class="spnSensorName" onclick="calSensorPage('CamshaftPosition','CAMSHAFT" position="" sensor);="">CAMSHAFT POSITION SENSOR</span>

我需要這樣的輸出。

 <span class="spnSensorName" onclick="calSensorPage('CamshaftPosition','CAMSHAFT position sensor')">CAMSHAFT POSITION SENSOR</span>

我知道一些遺漏的報價。 請幫助我修復。

對不起我的英語不好。

謝謝

Answer 1

該問題是由於您在生成的span字符串中使用了不匹配且未轉義的引號引起的。 嘗試這個：

 var _fileName = [{ "Sno": 1, "SensorNmtxt": "RAIL PRESSURE SENSOR", "SenFnCal": "RailPressure", "SenIcon": 1 }]; var imgTag = '', _ImgPath = "/"; $.each(_fileName, function(i, item) { imgTag += "<div class='DivColumn-6'>"; imgTag += "<img src=" + _ImgPath + "Icons/" + _fileName[i]['SenIcon'] + ".jpg class='imgSenIcons'/>"; imgTag += '<span class="spnSensorName" onclick="calSensorPage(\\'' + _fileName[i]['SenFnCal']; imgTag += '\\',\\'' + _fileName[i]['SensorNmtxt']; imgTag += '\\')";>' + _fileName[i]['SensorNmtxt']; imgTag += '</span></div>'; }); $("#divSensorMnu").append(imgTag); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divSensorMnu"></div> 

但是，您應該注意，使用on*事件屬性是一種非常過時的方法，並且使HTML和關聯的JS代碼變得一團糟-從上面的串聯夢night中可以看出。

更好的解決方案是使用data屬性將所需的元數據存儲在元素中，並添加一個不引人注意的事件處理程序，如下所示：

 var _fileName = [{ "Sno": 1, "SensorNmtxt": "RAIL PRESSURE SENSOR", "SenFnCal": "RailPressure", "SenIcon": 1 }] var _ImgPath = "/"; var html = _fileName.map(function(item) { return `<div class="DivColumn-6"><img src="${_ImgPath}Icons/${item.SenIcon}.jpg class="imgSenIcons"/><span class="spnSensorName" data-fncal="${item.SenFnCal}">${item.SensorNmtxt}</span></div>`; }); $("#divSensorMnu").append(html); $('.spnSensorName').click(function() { var $el = $(this) var fncal = $el.data('fncal'); var nmtxt = $el.text(); console.log(fncal, nmtxt); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divSensorMnu"></div> 

Answer 2

嘗試這個

演示 ： https : //codepen.io/anon/pen/XEwzaN

var SensorNmtxt = "CAMSHAF position sensor";
var SenFnCal = "CamshaftPosition";


var  imgTag = "<div class='DivColumn-6'>";
imgTag += '<img src=123Icons/123.jpg class="imgSenIcons"/>';
imgTag += '<span class="spnSensorName" onclick="calSensorPage(\'' + SenFnCal + '\',\'' + SensorNmtxt + '\')">' + SensorNmtxt;
imgTag += '</span></div>';

$("#divSensorMnu").append(imgTag);
console.log(imgTag)


function calSensorPage (){
  console.log("hi")
}

Answer 3

您好，這里是您糾正的js，您在這里添加了一個'，因為您缺少它並沒有完成onclick標記：

   imtTag += '<span class="spnSensorName" onclick="calSensorPage(\'' + _fileName[i]['SenFnCal'];
   imgTag += '\',\'' + _fileName[i]['SensorNmtxt'];
   imgTag += '\');">' + _fileName[i]['SensorNmtxt'];
   imgTag += '</span></div>';

只需簡單地更改所有雙引號，並為onclick方法添加“”