JQuery

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

你做错的是使用 HTML 的字符串而不是自己构造和附加元素，这（除了潜在的安全问题之外）可能会导致你所遇到的那种令人困惑和烦人的行为看到这里。你想要这样的东西：

var myImg = $("<img/>");
myImg.attr("src", "http://urltoimage/image.jpg");
myImg.on("click", function(e) {
  selectRadioButton("idFirstRadioButton");
});
$("#idFirstRadioButton").after(myImg);

Answer 2

您应该在 .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 内绑定事件处理程序，而应尝试使用正确的方式处理它们。 @Dan O 提供的示例似乎是您应该寻找的东西。

Answer 3

当 " 或 ' 的深度超过 1 级时，您需要插入或转义它们。

最后一个应该是正确的，除了你在里面一直使用 " 而不是转义它们或交替它们。

正确的应该是：

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

所以我们从后面的单引号开始，然后是 href 的双引号，然后我们在 selectRadioButton 内部转义单引号，然后是单引号退出字符串并转储 var，然后回到弦内并继续。 Fiddle

NOTE: Remember to declare your var "VARidFirstRadioButton" that's the shape of error.

JQuery - 带引号的 after() 函数

JQuery - after() function with quotes

html

javascript

function

jquery-after