Question

我有一些我无法理解的东西，而且我正在为此奋斗2天。对于这个故事，我正在使用VICOPO api来获取zipcode / city（法国只有ithink）。问题是我生成的代码不是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}标签包围的智能tpl文件中）

感谢。

Answer 1

而不是

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

试试这个：

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

Here's some info关于何时以及如何使用双/单引号。

编辑：

另外，请检查此else声明中的if：

if (cities.length == 1)

您需要在}中关闭大括号（else）。它应该在这一行之后直接添加：

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

Answer 2

尝试通过jquery创建self closed代码，然后将它们附加到#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);

}

使用jQuery.html（）编写错误的HTML格式

2 个答案: