Question

以下是我的代码，试图将一些html添加到页面...

$('#DocUploadDiv').append(
    '<div class="uploadClick" style="float:left; margin-right: 10px; margin-bottom: 10px">' + 
    '<i class="fa fa-times fa-remove"></i>' +
    '<i class="fa fa-plus-circle fa-2x" onclick="$("#DocUpload").click()"></i>' + 
    '<div>'
);

使用此jQuery代码时，我可以在页面上获得正确的div样式。

然而，onclick事件无效。

如何使用jQuery附加html代码时添加onclick事件？

Answer 1

看看你的报价。

`'....onclick="$("#DocUpload").click()"...`

该属性在哪里结束？答：这里：

`'....onclick="$("#DocUpload").click()"...`
// --------------^

因为这是开幕"之后的第一个"。

您可以通过以下两种方式修复它：使用'并转义它（因为它全部位于由'分隔的字符串中）：

`'....onclick="$(\'#DocUpload\').click()"...`
// --------------^^----------^^

或由于onxyz处理程序中的文字是 HTML （虽然人们往往会忘记），但可能使用命名字符实体{{1} }：

&quot;

但更好将使用现代事件处理：

完全抛弃`'....onclick="$("#DocUpload").click()"...` // --------------^^^^^^----------^^^^^^属性
为onclick元素添加语义类，例如i
使用委派处理：
```
trigger-upload
```

比更好的是让两个元素都调用相同的函数，而不是进行合成点击：

$(document).on("click", "#DocUploadDiv .trigger-upload", function() {
    $("#DocUpload").click();
});

甚至：

function handleUpload() {
    // Do whatever you're doing in the #DocUpload click handler now
});
$("#DocUpload").click(handleUpload);
$(document).on("click", "#DocUploadDiv .trigger-upload", handleUpload);

如何使用jQuery添加o＆＃39; clock事件附加html代码？

1 个答案: