javascript - 从 Blueimps Jquery 文件上传中的下载模板中单击的段落中获取 id
问题描述
我正在尝试自定义 Blueimp Jquery 文件上传,因此它会在<object>
标签中返回上传的 pdf,这实际上效果很好。
现在我正在尝试制作一个按钮来<object>
打开/关闭 pdf,但是当我触发事件时,我无法遍历甚至做一些简单的事情,比如从按下的按钮中获取 ID。
这是我正在使用的 Jquery File Upload 的下载模板:
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
<!--What I'm trying to press to toggle the pdfviewer -->
<p style="line-height: 30px;
margin: auto;
font-size: 16px;
padding: 5px;
text-align: center;
background: #555;
border: solid 1px #666;
color: #ffffff;
border-radius: 3px;
user-select: none; cursor:pointer;" id="hejsaa" onclick="Sayhi()">
Tryk her for at vise eller skjule elementer
</p>
<object class="pdfviewer" width="400" height="500" type="application/pdf" id="noget" data="{%=file.url%}?#zoom=85&scrollbar=1&toolbar=0&navpanes=0"></object>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
这是被触发的脚本(它确实被成功触发):
function Sayhi() {
console.log($(this).attr('id'));
$(this).next().toggle(1000);
}
<p>
当我按下标签时,我的控制台日志显示未定义。
我也尝试过遍历元素,但在那里我也没有成功。
编辑:这似乎与 BlueImp Jquery File Upload 将 HTML 动态添加到 DOM 的事实有关,这意味着没有附加处理程序并且它不会注册点击事件/将其绑定到元素。
解决方案
您可以通过参数发送元素并在函数上获取它。
请参阅示例:
function Sayhi(e) {
console.log($(e).attr('id'));
$(e).next().toggle(1000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="hejsaa" onClick="Sayhi(this)"> Tryk her for at vise eller skjule elementer </p>
<p style="display:none;">Next</p>
推荐阅读
- docker - 如何重新启动使用 exitCode 127 过早退出的 docker 容器?
- javascript - 如何获取 CSS 样式的类
- java - 列出java中布尔运算符的优先顺序
- python - Python枚举防止无效的属性分配
- reactjs - 为什么我会收到“函数参数属性的赋值..”eslinterror?
- javascript - 调整页面大小时,如何使我的表单项响应并对齐?
- c# - 带有调度程序的软件 c#
- node.js - 如何在 Knex.js 中动态创建 where 条件?
- javascript - Flexbox 从项目数组中扩展一个项目的全宽
- javascript - 在渲染之前使用 setState() 设置状态?