How can I reference js files properly so external html can reference those files?

Question

I'm pretty new to Javascript, so I'll attempt to ask the question correctly. I'm working with a drag-drop file upload jquery plugin. Currently the html for each file item is brought in externally, in a js file:

   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>
   ');

The problem I'm having is that I'm trying to add "click to edit text" functionality (ie Jeditable), so I can add a file description to each file item. Problem is that the javascript for Jeditable to work is being referenced in the html file itself. And the externalized html is not able reference those js files. How can I reference those js files properly so the externalized html can work?

Answer 1

Things don't really add up, but this is doing what I think you want it to do: https://jsfiddle.net/wqpddqn9/11/

Example 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>

Example 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;
}

Example 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);
  });
});

Depending on how things load, you may want to add the JQuery to the end of the HTML or switch to .on() like so:

$("#description").on('click', function() {

Since you're adding a Description to this file, I appended the text box into this same List Item ( li ) just after the file name. not sure if this will fully address the issues since it's not clear what you are encountering or what you want to accomplish. Feel free to comment with more details or edit your post.

Answer 2

If you are using jQuery, then when dynamically adding html elements you might consider using this way to bind onClick events:

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

This handles dynamically added elements well. Using jQuery might be the simplest solution for you.