使用JavaScript将onclick事件与参数绑定

Using JavaScript to bind onclick event with arguments

本文关键字：参数 绑定 事件 onclick JavaScript 使用      更新时间：2023-09-26

我正在使用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:未终止的字符串文字

有人面对过这个错误吗？任何帮助都将不胜感激。

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

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

演示。

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

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找不到右引号，所以它抛出了一个错误。

相关文章：