javascript - 如何显示 url - onclick 事件内部 - Jquery Append 函数

Question

我使用ajax上传图像并使用jquery追加方法显示上传的图像。在这种方法中，我需要将 onclick 事件添加到相应的图像标签。

首先，我创建一个 JavaScript 变量并分配图像路径。在图像 src 属性中，我定义了 js 变量，其显示正确，但 onclick 事件其显示错误。我显示在下面。

<img src="http://localhost/farhuman/media/com_farhuman/uploads/12102019105542fb9e03695b663514a7bce87e5ff9180bdiwali.png" onclick="addclipart(" http:="" localhost="" farhuman="" media="" com_farhuman="" uploads="" 12102019105542fb9e03695b663514a7bce87e5ff9180bdiwali.png')'="">

这是我的附加脚本

var imagepaths="<?php echo JUri::base(); ?>media/com_farhuman/uploads/"+json['code'];

$("#uploadedimgs").append("<div class='col-md-4'><img src='"+imagepaths+"' onClick='addclipart('"+imagepaths+"')'></div>");

Answer 1

尝试使用反引号来消除轻微的语法错误。另外，请记住路径变量应作为字符串传递。

let imagepaths = 'https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mfit/w_700/sample.jpg';
$("#uploadedimgs").append(`
<div class="col-md-4">
<img src="${imagepaths}" onClick="addclipart('${imagepaths}')" /></div>
`);

function addclipart(path) {
  console.log(path)
}

img {
  max-width: 100px;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="uploadedimgs"></div>