[英]how to append html element via jquery?
i used jquery to append html content with onclick function from jquery , but my content doesn't render properly , please help me to fix this. 我使用jquery从jquery中添加了带有onclick函数的html内容,但是我的内容无法正确呈现,请帮助我解决此问题。
my code is 我的代码是
$.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);
Out is render like this : 输出是这样的渲染:
<span class="spnSensorName" onclick="calSensorPage('CamshaftPosition','CAMSHAFT" position="" sensor);="">CAMSHAFT POSITION SENSOR</span>
I need output like this. 我需要这样的输出。
<span class="spnSensorName" onclick="calSensorPage('CamshaftPosition','CAMSHAFT position sensor')">CAMSHAFT POSITION SENSOR</span>
i know some missing quotes. 我知道一些遗漏的报价。 please help me to fix.
请帮助我修复。
sorry for my english. 对不起我的英语不好。
thanks 谢谢
The issue is due to your use of mis-matching and un-escaped quotes within the span
string you generate. 该问题是由于您在生成的
span
字符串中使用了不匹配且未转义的引号引起的。 Try this: 尝试这个:
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>
However you should note that using on*
event attributes is a very outdated approach, and makes the HTML and associated JS code a mess to work with - as you can see from the concatenation nightmare above. 但是,您应该注意,使用
on*
事件属性是一种非常过时的方法,并且使HTML和关联的JS代码变得一团糟-从上面的串联梦night中可以看出。
A much better solution is to store the required metadata in the element using data
attributes and add an unobtrusive event handler, something like this: 更好的解决方案是使用
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>
try this 尝试这个
demo : https://codepen.io/anon/pen/XEwzaN 演示 : 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")
}
Hi here is your corrected js you're missing a ' right here i added it, because you were missing it it didn't finish the onclick tag : 您好,这里是您纠正的js,您在这里添加了一个',因为您缺少它并没有完成onclick标记:
imtTag += '<span class="spnSensorName" onclick="calSensorPage(\'' + _fileName[i]['SenFnCal'];
imgTag += '\',\'' + _fileName[i]['SensorNmtxt'];
imgTag += '\');">' + _fileName[i]['SensorNmtxt'];
imgTag += '</span></div>';
Just change all you double quote by simple and add " " for onclick method 只需简单地更改所有双引号,并为onclick方法添加“”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.