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);

Out就像这样呈现：

<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字符串中使用了错误匹配和未转义的引号。试试这个：

＆＃13;

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);

＆＃13;

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

＆＃13;

但是你应该注意到使用on*事件属性是一种非常过时的方法，并且使得HTML和相关的JS代码变得混乱 - 正如你从上面的串联噩梦中看到的那样。

更好的解决方案是使用data属性将所需的元数据存储在元素中，并添加一个不显眼的事件处理程序，如下所示：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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方法添加“”

如何通过jquery追加html元素？

3 个答案: