Question

我在javascript上附加一些html代码。我也绑定了onclick。问题是，每次按下onclick，我都会收到一个javascript错误。我正在将一个字符串传递给onclick函数。这是一个更清晰的观点。

var propertyTypeDdlValues = "";

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

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

这是我的selectPropertyType

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

我一直有这个错误：

Uncaught SyntaxError: Unexpected token }

我认为问题是我如何包裹字符串（“”）。是什么让我说出来的？因为当我尝试使用这样一个简单的函数时：

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

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

它通过该功能并显示警告信息。

有什么想法吗？谢谢！

Answer 1

这是一个解决方案：

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");
}

Answer 2

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

Answer 3

将 propertyTypeDdlValues 修改为

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

Answer 4

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

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

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

它更清洁了。

友好的建议：永远不要再使用HTML /任何事件：）

Answer 5

您的原始字符串

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

获取解析为此HTML：

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

onclick atrribute在左括号后面结束，导致无效的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)

使用onclick添加到javascript上

5 个答案: