在 HTML 属性中调用带有字符串参数的函数的正确语法是啥？ [复制]

Posted 2023-03-24

【中文标题】在 HTML 属性中调用带有字符串参数的函数的正确语法是啥？ [复制]

【英文标题】：What's the proper syntax for calling a function with a string parameter in an HTML attribute? [duplicate]在 HTML 属性中调用带有字符串参数的函数的正确语法是什么？ [复制]

【发布时间】：2021-06-29 16:40:58

【问题描述】：

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

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

我无法将字符串括在单引号中，因为它会在网站上生成此字符串，并且我收到错误“Unexpected end of input”：

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

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

【问题讨论】：

$previewDiv.html(`<button id="myBtn" onclick="CheckID('MYID')"></button>`)

有点跑题了：我该怎么做你不会（不再）。使用适当的事件处理程序并通过数据属性传递您的数据，例如$previewDiv.html("<button id='myBtn' data-id='MYID'></button>"); $("#myBtn").click(function() var id = $(this).data("id"); CheckID(id); );

@JaromandaX 使用反引号有效！我不熟悉那种语法！谢谢！

@HereticMonkey & James：我能够通过用反引号括住外部字符串来使其工作。这是我在问这个问题之前不熟悉的 javascript 语法。

【参考方案1】：

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>`)

【讨论】：

反引号是我尝试过的，它奏效了。感谢您的反馈。