Question

我遇到语法错误，但是我无法正确解决。

我要实现的目标：

<input type='checkbox' onclick="document.location.href ='http://google.com'" >

我需要在目标为变量的prepend()方法内添加 onclick 事件。

我要包含我的原始功能：

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 + "' >");
            });
        }

摘要（不起作用...）

var link = "https://google.com";
$('#myDiv').prepend("<input type='checkbox' onClick='document.location.href='" + link + "' >")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
  <p>
  the div
  </p>
</div>

Answer 1

与其尝试添加onclick属性，不如通过JS代码绑定事件处理程序，这是更好的做法，这样您就可以避免引用变量的问题：

var link = "https://google.com";
$('#myDiv').prepend($("<input>").attr("type", "checkbox").click(function () {
    document.location.href = link;
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
  <p>
  the div
  </p>
</div>

Answer 2

编写内联javascript代码，检查我的代码是一种不好的做法。我已经创建了一个函数，并通过onclick事件对其进行了调用。

var link = "https://google.com";
$('#myDiv').prepend("<input type='checkbox' onclick='exec()' />");

function exec(){ document.location.href=link; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
  <p>
  the div
  </p>
</div>

Answer 3

以这种方式编写时，浏览器不会创建事件处理程序（您可以在html代码中进行操作，因为在DOM准备就绪时浏览器会自动读取它）。因此，您必须通过Javascript定义事件处理程序。更好的方法：

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

在prepend（）方法内部将变量添加到onClick（）事件

3 个答案: