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 ....

如果有人有想法或我做错了什么，那会很酷。

（我可以提一下，这段代码在一个用 {literal} 标签包围的 smarty tpl 文件中）

Answer 1

而不是

html += '<p onclick=\'alert(\'' + v + '\');\'>' + v + '</p>';

试试这个：

html += '<p onclick="alert(\'' + v + '\');">' + v + '</p>';

以下是有关何时以及如何使用双引号/单引号的一些信息。

编辑：

另外，请检查此if语句中的else ：

if (cities.length == 1)

您需要一个结束的大括号 ( } ) 来结束else 。 它应该直接添加到这一行之后：

$('#multi_ville').html(html);

Answer 2

尝试通过 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);

}