我有一些我无法理解的事情,我已经为此苦苦挣扎了 2 天。 对于这个故事,我使用 VICOPO api 来获取邮政编码/城市(我认为仅限法国)。 问题是我生成的代码并不能很好地被 jQuery 解释(或者也许我做错了) 这是代码:
$('#postcode').val($('#postcode').val().toUpperCase());
if ($('#postcode').val().length == 5)
{
var $ville = $('#postcode');
$.vicopo($ville.val(), function (input, cities) {
if(input == $ville.val() && cities[0]) {
if (cities.length == 1)
$('#city').val(cities[0].city);
else
{
var html = '';
html += '<div style=\'text-align:center\'>';
for (var i=0; i<cities.length; i++)
{
var v = cities[i].city;
// --- HERE IS MY PROBLEM ---
html += '<p onclick=\'alert(\'' + v + '\');\'>' + v + '</p>';
}
html += '</div>';
console.log(html);
$('#multi_ville').html(html);
}
}
});
当我检查 multi_div 中的元素时,我得到的是:
<p onclick="alert(" billey');'>BILLEY</p>
<p onclick="alert(" flagey-les-auxonne');'>FLAGEY-LES-AUXONNE</p>
etc ....
当我检查控制台日志时,一切看起来都是正确的:
<p onclick='alert('BILLEY');'>BILLEY</p>
<p onclick='alert('FLAGEY-LES-AUXONNE');'>FLAGEY-LES-AUXONNE</p>
<p onclick='alert('VILLERS-LES-POTS');'>VILLERS-LES-POTS</p>
etc ....
如果有人有想法或者我做错了什么,那会很酷。
(我可以提一下,这段代码位于一个 smarty tpl 文件中,周围有 {literal} 标签)
最佳答案
尝试创建self closed通过 jquery 标记,然后将它们附加到 #multi_ville
,这是一个示例:
// create div element
var div = $('<div/>', {
'style' : 'text-align:center'
});
for (var i=0; i<cities.length; i++)
{
var v = cities[i].city;
// create p element with click event and then append it to div
$('<p/>').on('click', function() {
alert(v);
}).text(v).appendTo(div);
}
$('#multi_ville').append(div);
编辑 看来,当我们点击某个元素时,上面的代码总是提醒最后一个城市,那是因为 alert
采用 v
的值> 变量在运行时有,为了解决这个问题,我们可以使用let语句:
let v = cities[i].city;
或者一个函数:
for (var i=0; i<cities.length; i++) {
var v = cities[i];
createPTag(v, div);
}
function createPTag(v, div) {
$('<p/>').on('click', function() {
alert(v);
}).text(v).appendTo(div);
}
关于javascript - jQuery.html() 的 html 格式错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48255573/