使用JavaScript追加参数调用函数

Question

我需要在jQuery append方法中调用带参数的函数，并希望传递一个名为image的变量，但即使我传递一个静态值，我仍会遇到语法错误

$("#officialDiv").append("<a onclick='remove('" + image + "');' class='btn btn-danger btn-sm'></a>");

或静态

$("#officialDiv").append("<a onclick='remove('test');' class='btn btn-danger btn-sm'></a>");

function remove(file) {
}

错误的屏幕截图

Answer 1

这是因为您的HTML字符串在'上中断了。你需要逃避报价。

$("#officialDiv").append("<a onclick=\"remove(\'" + image + "\');\" class='btn btn-danger btn-sm'>Link</a>");

应该可以正常工作。

<强>演示

＆＃13;

＆＃13;

var image = "some_data";
$("#officialDiv").append("<a onclick=\"remove(\'" + image + "\');\" class='btn btn-danger btn-sm'>Link</a>");

function remove(a){
  console.log(a+" is removed");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="officialDiv"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题似乎可能在image变量中。

尽管如此，我们可以使用template literals来减少报价混淆。

$("#officialDiv").append(`<a onclick="remove(${image});" class="btn btn-danger btn-sm">Image</a>`);

这是一个有效的例子：

＆＃13;

＆＃13;

var image = "myImage";

$("#officialDiv").append(`<a onclick="remove('${image}');" class="btn btn-danger btn-sm">Image</a>`);

const remove = function(name) {
  alert(name);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="officialDiv"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

var test = 'test';
		$("#officialDiv").append("<a onclick='remove(test)' class='btn btn-danger btn-sm'>click me</a>");

		function remove(file) {
			alert(file);
		}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='officialDiv'></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这种做法怎么样？

var anchor = $("<a class='btn btn-danger btn-sm'>click me</a>");
anchor.on('click', function () {
    remove(image)
});

$("#officialDiv").append(anchor);

function remove(file) {
    alert(file)
}

Answer 5

您可以通过事件处理程序解开行为，从而消除问题（您获得的额外好处是更清晰，可重用的代码）：

<a onclick="onRemoveClick()" ... >

function remove(value) { ... } 
function onRemoveClick() { remove('image'); }

Answer 6

就我而言，以上所有解决方案均未达到我的要求。

$('.my-list').append('<a href="javascript:openFile(\''+ dataId +'\')"><li class="list-group-item">'+ itemName +'</li></a>');