javascript - jQuery.html() 的 html 格式错误

Question

我有一些我无法理解的事情，我已经为此苦苦挣扎了 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} 标签)

Answer 1

尝试创建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);

}