时间戳

首页 > 解决方案 > 在 HTML 属性中调用带有字符串参数的函数的正确语法是什么？

javascript - 在 HTML 属性中调用带有字符串参数的函数的正确语法是什么？

问题描述

我有几个在这个 Javascript 方法中生成的按钮，其中一个有 onclick() 处理程序，我需要在其中传递一个字符串作为输入参数。

function ShowButtons() {
  let $previewDiv = $("#ServicesPreview");
  $previewDiv.html("<button id='myBtn' onclick='CheckID('MYID')'></button>")
}

我无法将字符串括在单引号中，因为它会在网站上生成此字符串，并且出现错误“输入意外结束”：

<button id="myBtn" onclick="CheckID(" MYID')'></button>

我也尝试过不使用引号，也不能使用双引号，因为这会终止传递给 jQuery.html 方法的字符串。这里的正确语法是什么？

标签： javascripthtmljquery

解决方案

Freedomn-m 的评论是正确的：您最好使用 JavaScript 设置点击处理程序。我会更像这样：

function ShowButtons() {
  let $button = $("<button></button>");
  $button.click(() => CheckID("MYID"));
  $("#ServicesPreview").empty().append($button);
}

从长远来看，您会发现这种模式为您的代码组件化提供了更多的灵活性。最好避免依赖 HTML ID，因为它们在 DOM 中必须是唯一的，所以它们有点像全局变量。

但是，如果您必须坚持您所询问的模式，则解决引号中引号的方法是转义引号以适应它们所在的上下文。由于您的引号在 HTML 中，您可以使用 HTML 转义：

function ShowButtons() {
  let $previewDiv = $("#ServicesPreview");
  $previewDiv.html("<button id='myBtn' onclick='CheckID(&quot;MYID&quot;)'></button>")
}

或者，由于您使用的是 JavaScript，您可以转义 JavaScript 双引号。

function ShowButtons() {
  let $previewDiv = $("#ServicesPreview");
  $previewDiv.html("<button id='myBtn' onclick='CheckID(\"MYID\")'></button>")
}

或者您可以首先使用反引号，这样双引号就不需要转义。

function ShowButtons() {
  let $previewDiv = $("#ServicesPreview");
  $previewDiv.html(`<button id='myBtn' onclick='CheckID("MYID")'></button>`)
}

推荐阅读