点击生成无效函数

Question

我有一个附加到函数的变量。我正在尝试在点击事件中使用该变量。 这就是我正在做的

var show = function() {
console.log("hello");
};
$(container).append(
"<div class='info' onclick=" + show + ">Show</div>"
);

但是生成的 html 是这样的

<div class="info" onclick="function()" {="" console.log("hello");="" }="">
Show
</div>

知道我如何解决这个问题，以便当我单击div 时我的函数被调用吗？

Answer 1

你可以简单地这样做，只需显示一个函数并在单击时调用它。 这将起作用

<script>
function show() {
console.log("hello");
}
$(container).append(
'<div class="info" onclick="show()">Show</div>'
);
</script>

Answer 2

对于您要做的事情来说，这是一种不寻常的方法。我认为在jQuery中会更习惯

a( 首先使用事件处理程序定义元素，然后追加它，

$("<div>Show</div>", {
"class": "info",
on: {
click: function(e) {
console.log("Hello");
}
}
}).appendTo($(container));

或

b( 附加一个新元素，然后在追加后向其添加事件处理程序。

$(container).append("<div class='info'>Show</div>");
$(container).children('.info').last().on('click', function(e) { console.log("Hello"); });

在这两个之间，在这种情况下，我推荐第一个。

Answer 3

>变量show是function，那么怎么用string绑定呢？

代码应该是这样的，

$(container).append("<div class='info' onClick='show()'>Show</div>");

Answer 4

尝试使用：

var show = function() {
console.log("hello");
};
$(container).append("<div class='info' onclick="+'show()'+">Show</div>");

这将起作用。 你的代码的原因

var show = function() {
console.log("hello");
};
$(container).append("<div class='info' onclick=" + show + ">Show</div>");

没有按要求工作，因为 show 是函数类型的对象，因此当使用没有()的函数名称时，变量将被替换到它所包含的代码中。 希望对您有所帮助。