javascript - 使用 onclick 在 javascript 上附加

Question

我在 javascript 上附加了一些 html 代码。我还绑定了一个 onclick 到它。问题是，每次按 onclick 时都会出现 javascript 错误。我正在将一个字符串传递给函数 onclick。这是一个更清晰的视图。

var propertyTypeDdlValues = "";

propertyTypeDdlValues += "<li onclick='selectPropertyType('Condominium/Studio')'>Condominium/Studio</li>"; 

$("#propertyTypeDdl").html(propertyTypeDdlValues);

这是我的选择属性类型

function selectPropertyType(cattype){
    $("#propertyType").text(cattype);
    $("#hdnPropertyType").val(cattype);
}

我一直有这个错误：

Uncaught SyntaxError: Unexpected token }

我认为问题在于我如何将字符串环绕（“”）。是什么让我这么说？因为当我尝试使用这样的简单函数时：

propertyTypeDdlValues += "<li onclick='displayMessage()'>Condominium/Studio</li>"; 

function displayMessage(){
    alert("Message");
}

它通过该功能并显示警报消息。

有任何想法吗？谢谢！

score 1 · Accepted Answer

这是一个解决方案：

JSFiddle

$(function () {  

     $("#propertyTypeDdl").append("<li onclick=
      selectPropertyType('Condominium/Studio')>Condominium/Studio</li>");

     $("#propertyTypeDdl").append("<li onclick=
      'displayMessage()'>Condominium/Studio</li>");
});

function selectPropertyType(cattype) {
    $("#propertyType").val(cattype);
}

function displayMessage() {
    alert("Message");
}

score 0 · Accepted Answer

一种方法是将该字符串存储在一个变量中并将其传递给函数。但我想其他人会给出更好的答案。

score 0 · Accepted Answer

将您的propertyTypeDdlValues修改为

propertyTypeDdlValues += 
   "<li onclick='selectPropertyType('\'Condominium/Studio\'')'>
      Condominium/Studio
   </li>"

score 0 · Accepted Answer

您正在使用 jQuery。那么为什么不呢：

foreach(thing in listOfThings) {
    var li = $('<li>' + thig.name + '</li>');
    li.click(function(e) {
        selectPropertyType($(this).html());
    });

    $("#propertyTypeDdl").append(li);
}

它干净了很多。

友好的建议：永远不要再在/任何事件上使用 HTML :)

score 0 · Accepted Answer

您的原始字符串

"<li onclick='selectPropertyType('Condominium/Studio')'>Condominium/Studio</li>"

被解析为以下 HTML：

<li onclick='selectPropertyType('Condominium/Studio')'>Condominium/Studio</li>

onclick 属性在左括号之后结束，导致 javascript 无效。由于您有三层嵌套，因此您需要转义引号：

"<li onclick='selectPropertyType(\'Condominium/Studio\')'>Condominium/Studio</li>"

或者

"<li onclick='selectPropertyType(\"Condominium/Studio\")'>Condominium/Studio</li>"

但最好避免将javascript代码片段作为字符串（并且，由于您使用的是jQuery，onclick因此完全避免使用属性），并创建一个元素并将其单击处理程序设置为一个函数。这也将避免嵌套字符串文字的需要：

var $li = $("<li>").text('Condominium/Studio').click(function(){
  selectPropertyType('Condominium/Studio')
});

$propertyTypeDdlValues = $propertyTypeDdlValues.add($li)

javascript - 使用 onclick 在 javascript 上附加

5 回答 5

Related

Reference