Question

我正在使用javascript创建一个按钮元素并将onclick事件绑定到它。我使用下面的代码

function getElement (rowObject )
       {
          var element ='<div id="deptNmBtn"><button onClick=getDepartMentNm("' +   rowObject.empName+'")> <span>Add</span></button></div>';
          return element;
       }

但是我在这里传递一个参数Employee Name。如果员工姓名作为单个字符串传递而没有任何空格，但是当使用空格传递其抛出javascript错误时，代码可以工作。

    SyntaxError: unterminated string literal

有没有人遇到过这个错误？任何帮助将非常感激。感谢。

Answer 1

您需要使用'包装内联点击处理程序：

function getElement (rowObject) {
  var element = '<div id="deptNmBtn"><button onClick=\'getDepartMentNm("' +   rowObject.empName + '")\' ><span>Add</span></button></div>';
  return element;
}

<强> DEMO

Answer 2

您的代码中存在引用问题。试试这个：

var element = '<div id="deptNmBtn"><button onClick="getDepartMentNm(\'' + rowObject.empName + '\')" ><span>Add</span></button></div>';

如您所见，onClick的值未加引号。浏览器可以解析不带引号的属性，但随后它们最终会占用一个空格。实际上你解析的代码看起来像这样：

<button onClick=getDepartMentNm("Employer Name")>

HTML解析器会从第一个空格中删除函数调用，并忽略Name")，因为它无法被识别为有效的HTML。 JavaScript是从“从右到左”执行的，JS尝试做的第一件事是获取函数参数的有效字符串。现在HTML解析器已经切断了函数，并且JS无法找到结束引号，因此它会抛出错误。

使用javascript绑定带参数的onclick事件

2 个答案: