[英]how to append html element via jquery?
我使用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>
我知道一些遗漏的报价。 请帮助我修复。
对不起我的英语不好。
谢谢
该问题是由于您在生成的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>
尝试这个
演示 : 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")
}
您好,这里是您纠正的js,您在这里添加了一个',因为您缺少它并没有完成onclick标记:
imtTag += '<span class="spnSensorName" onclick="calSensorPage(\'' + _fileName[i]['SenFnCal'];
imgTag += '\',\'' + _fileName[i]['SensorNmtxt'];
imgTag += '\');">' + _fileName[i]['SensorNmtxt'];
imgTag += '</span></div>';
只需简单地更改所有双引号,并为onclick方法添加“”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.