Question

我对Javascript很陌生，所以我会尝试正确地提出这个问题。我正在使用拖放文件上传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>
   ');

我遇到的问题是我试图添加＆＃34;点击编辑文字＆＃34;功能（即可编辑），所以我可以为每个文件项添加文件描述。问题是，在html文件本身中引用了Jeditable工作的javascript。外化的html无法引用那些js文件。如何正确引用这些js文件，以便外部化的html可以工作？

Answer 1

事情并没有真正加起来，但这正是我认为您希望它做的事情：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 &amp; 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）中。不确定这是否能完全解决问题，因为不清楚你遇到了什么或想要完成什么。随意评论更多详细信息或编辑您的帖子。

Answer 2

如果您使用的是jQuery，那么在动态添加html元素时，您可以考虑使用这种方式绑定onClick事件：

$(".element-class").on("click", function(){
    //Do your thing with $(this) selector to handle the clicked element
});

这可以很好地处理动态添加的元素。使用jQuery可能是最简单的解决方案。

如何正确引用js文件，以便外部html可以引用这些文件？

2 个答案: