在prepend()方法中为onClick事件添加变量时遭遇语法错误求助

我帮你找出问题啦！你的代码里主要是引号嵌套的语法错误导致无法运行，咱们一步步解决：

1. 问题根源 #

你在拼接HTML字符串时，内层onClick里的双引号没有转义，和外层包裹HTML的双引号冲突了。比如这段代码：

$(this).prepend("<input class='filterCheckBox' type='checkbox' onClick='document.location.href="" + FilterLink + "" >");

浏览器解析时，第二个双引号会直接闭合外层的字符串，后面的+ FilterLink +就变成了无效代码，自然会抛出语法错误。

2. 快速修复：修正引号拼接 #

你可以通过转义内层双引号，或者改用模板字符串（ES6+）来避免引号冲突：

方式A：转义双引号 #

function AddTickBoxesToOptions() {
  $('.filter-options-content .item').each(function(){
    var FilterLink = $(this).find("a").attr("href");
    // 用反斜杠转义内层双引号
    $(this).prepend("<input class='filterCheckBox' type='checkbox' onClick='document.location.href=\"" + FilterLink + "\"'>");
  });
}

方式B：使用ES6模板字符串（更清晰） #

模板字符串用反引号包裹，内部可以直接用双引号，变量用${}插入，可读性更高：

function AddTickBoxesToOptions() {
  $('.filter-options-content .item').each(function(){
    var FilterLink = $(this).find("a").attr("href");
    $(this).prepend(`<input class='filterCheckBox' type='checkbox' onClick='document.location.href="${FilterLink}"'>`);
  });
}

3. 更推荐的方案：避免内联事件 #

内联onClick不仅容易引发引号问题，还不利于代码维护。更规范的做法是先创建DOM元素，再用jQuery绑定事件：

function AddTickBoxesToOptions() {
  $('.filter-options-content .item').each(function(){
    var FilterLink = $(this).find("a").attr("href");
    // 创建checkbox元素并设置属性
    const $checkbox = $("<input>", {
      class: "filterCheckBox",
      type: "checkbox"
    });
    // 绑定点击事件
    $checkbox.on('click', function() {
      window.location.href = FilterLink;
    });
    // 将checkbox前置到目标元素中
    $(this).prepend($checkbox);
  });
}

测试代码的修正版本 #

针对你提供的测试片段，修正后可以正常运行：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
  <p> the div </p>
</div>
<script>
var link = "https://google.com";
// 方案1：修正引号拼接
$('#myDiv').prepend("<input type='checkbox' onClick='document.location.href=\"" + link + "\"'>");

// 方案2：推荐的事件绑定（注释掉上面的代码，启用下面的即可）
// const $checkbox = $("<input>", {type: "checkbox"});
// $checkbox.on('click', function() {
//   window.location.href = link;
// });
// $('#myDiv').prepend($checkbox);
</script>

内容的提问来源于stack exchange，提问作者Greg