javascript - JQuery - after() 函数带引号

Question

我需要在单选按钮后添加一些 HTML，我想添加图像和功能，以便在单击单选按钮时检查它。我将使用我自己的 selectRadioButton() 函数检查单选按钮。

现有代码是，我无法编辑这部分:

<span class="ms-RadioText">
  <input id="idFirstRadioButton" type="radio" name="idFirstRadioButton" value="1" />
</span>

我的想法是添加带有功能的图像，如下所示:

$("#idFirstRadioButton").after("Image 1:<br/><a href=\"javascript:selectRadioButton(\"idFirstRadioButton\")\"><img src=\"http://urltoimage/image.jpg\" border=\"0\"/></a>");

但是当我使用这段代码时，我的页面的 HTML 是这样的:

<span class="ms-RadioText">
  <input id="idFirstRadioButton" type="radio" name="idFirstRadioButton" value="1" /> Image 1:<br/><a href="javascript:selectRadioButton(" shape="" idFirstRadioButton?)?=""><IMG src="http://urltoimage/image.jpg" border=0></a>
</span>

他正在添加“shape="”idFirstRadioButton?)?="""

正确的代码应该是:

<span class="ms-RadioText">
   <input id="idFirstRadioButton" type="radio" name="idFirstRadioButton" value="1" /> Image 1:<br/><a href="javascript:selectRadioButton("idFirstRadioButton")><IMG src="http://urltoimage/image.jpg" border=0></a>
</span>

我已经尝试过使用 '、\"、两者的组合、变量、...

$("#idFirstRadioButton").after("Image 1:<br/><a href=\"javascript:selectRadioButton(\"idFirstRadioButton\")\"><img src=\"http://urltoimage/image.jpg\" border=\"0\"/></a>");
$("#idFirstRadioButton").after('Image 1:<br/><a href="javascript:selectRadioButton(\"idFirstRadioButton\")"><img src="http://urltoimage/image.jpg" border="0"/></a>');
$("#idFirstRadioButton").after('Image 1:<br/><a href="javascript:selectRadioButton("' + VARidFirstRadioButton + '")"><img src="http://urltoimage/image.jpg" border="0"/></a>');

我做错了什么或者我应该使用什么代码？

Answer 1

您应该在 .after 字符串中使用不同的引号，因为它们是必需的。例如:

$("#idFirstRadioButton").after("Image 1:<br/><a href=\"javascript:selectRadioButton('idFirstRadioButton')\"><img src=\"http://urltoimage/image.jpg\" border=\"0\"/></a>");

这是结果:

<a href="javascript:selectRadioButton('idFirstRadioButton')"><img src="http://urltoimage/image.jpg" border="0"></a>

但是，这仅适用于您别无选择的情况。正如 @CBroe 提到的，您应该尝试不要在附加的 html 中绑定(bind)事件处理程序，而是尝试使用正确的方式处理它们。@Dan O 提供的示例似乎是您应该寻找的内容。