使用 javascript 将 onclick 事件与参数绑定答案

【问题标题】：using javascript to bind onclick event with arguments使用 javascript 将 onclick 事件与参数绑定
【发布时间】：2012-09-04 12:06:55
【问题描述】：

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

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

但在这里我传递了一个参数员工姓名。如果员工姓名作为没有任何空格的单个字符串传递，但当使用空格传递时，它会引发 javascript 错误，则该代码有效。

    SyntaxError: unterminated string literal

有人遇到过这个错误吗？任何帮助将不胜感激。谢谢。

【问题讨论】：

进入这个世纪并用其他东西替换那些内联处理程序怎么样。
你已经标记了 jQuery，但还没有利用它的使用。不要使用onclick属性，因为HTML属于.html文件，CSS属于.css文件，JS属于.js文件。

标签： javascript jquery javascript-events

【解决方案1】：

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

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

DEMO.

【讨论】：

感谢您的回答，我已标记。但是，如果您尝试传递对象本身，则它不起作用。在您的演示中尝试传递“rowObject”而不是“rowObject.empName”并且 alert("rowObject.empName") 打印未定义。

【解决方案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找不到右引号，所以会报错。

【讨论】：