![](/img/trans.png)
[英]How can I concatenate javascript files and replace the reference in my HTML?
[英]How can I reference js files properly so external html can reference those files?
我是Java語言的新手,所以我將嘗試正確地問這個問題。 我正在使用拖放文件上傳jquery插件。 當前,每個文件項的html是通過js文件從外部引入的:
var tpl = $('
<li class="working">
<input type="text" value="0" data-width="20" data-height="20"'+ ' data-fgColor="#8dc53e" data-readOnly="1" data-bgColor="#e9eaed" />
<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Description">Click to add description</a>
<span></span>
<a href="" download id="download-file">
<div class="download"></div>
</a>
</li>
');
我遇到的問題是我試圖添加“單擊以編輯文本”功能(即Jeditable),因此我可以向每個文件項添加文件說明。 問題是html文件本身中引用了Jeditable的javascript。 並且外部化的html無法引用這些js文件。 如何正確引用這些js文件,以便外部化的html可以正常工作?
事情並沒有真正加起來,但這正在做我認為您想要做的事情: https : //jsfiddle.net/wqpddqn9/11/
HTML范例
<div class="pane">
<form enctype="multipart/form-data" action="vendor/plugins/form/drag-drop-uploader/upload.php" method="post" id="upload">
<div class="drop-uploader" id="drop"> <span class="drop-text hidden-xs"> Drag & Drop Files <br>
<small>or</small> </span> <a class="btn btn-primary"> Browse Files </a>
<input type="file" multiple="" name="upl">
<ul>
<!-- The file uploads will be shown here -->
<li class="working">
<div>
<canvas height="20px" width="20"></canvas>
<input type="text" data-bgcolor="#e9eaed" data-readonly="1" data-fgcolor="#8dc53e" data-height="20" data-width="20" value="0" readonly="readonly" />
</div>
<a data-title="Click to Add Description" data-url="/post" data-pk="1" data-type="text" id="description" href="#">Click to Add Description.</a>
<p>where-is-everyone.png <i>281.86 KB</i></p>
<span></span>
<a id="download-file" download="" href="#">
<div class="download"></div>
</a>
</li>
</ul>
</div>
<!-- drop -->
</form>
</div>
CSS示例
.working div {
display: inline-block;
width: 20px;
height: 20px;
}
.working input[type='text'] {
width: 2em;
height: 1em;
position: absolute;
vertical-align: middle;
margin-top: 6px;
margin-left: -17px;
border: 0px none;
background: transparent none repeat scroll 0% 0%;
font: bold 14px Arial;
text-align: center;
color: rgb(141, 197, 62);
padding: 0px;
}
實例jQuery
var tpl = '<input type="text" value="0" data-width="20" data-height="20" data-fgColor="#8dc53e" data-readOnly="1" data-bgColor="#e9eaed" /> <a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Description">Save</a><span></span><a href="" download id="download-file"><div class="download"></div></a>';
$(document).ready(function() {
$("#description").click(function() {
$(this).next("p").after(tpl);
});
});
根據加載的方式,您可能需要將JQuery添加到HTML的末尾,或切換到.on()
如下所示:
$("#description").on('click', function() {
由於您要向該文件添加說明,因此我在文件名之后將文本框附加到了相同的列表項( li
)中。 由於不清楚您遇到什么或想要完成什么,因此不確定是否可以完全解決問題。 隨時發表評論,提供更多詳細信息或編輯您的帖子。
如果使用的是jQuery,則在動態添加html元素時,您可以考慮使用這種方式綁定onClick事件:
$(".element-class").on("click", function(){
//Do your thing with $(this) selector to handle the clicked element
});
這樣可以很好地處理動態添加的元素。 使用jQuery可能是最簡單的解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.