Question

此刻我尝试将一些jquery应用于我之前用js创建的html元素。但它不起作用。

此代码有效，所以原因不能是我忘记要导入的内容：

$(document).ready(function(){
    $(".test").click(function(){
        $(this).css("border", "5px solid #000");
    }); });

.test{
  width:100px;
  height:100px;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">

</div>

但是，如果我在html上尝试相同，我使用js创建没有任何反应：

document.getElementById('files').addEventListener('change', handleFileSelect, false);

  function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img src="', 
            e.target.result,
            '" title="', escape(theFile.name), 
            '"/>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

$(document).ready(function(){  
  $("img").on("click", function(){
    $(this).css("border", "5px solid #000");
});});
//$(document).ready(function(){
//    $("img").click(function(){
//        $(this).css("border", "5px solid #000");
//    }); });

img{
  height: 75px;
  border: 1px solid #000;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='test-form'>
  <input type="file" id="files" name='input1' multiple/><br>
  <output id="list"></output><br>
</form>

我想也许函数.on()可以帮助我，但它也不起作用。

但是“使用on（）方法附加的事件处理程序将适用于当前和FUTURE元素（如脚本创建的新元素）”来自W3C schools，即使这不是最好的参考。

那我错了什么，我的错误在哪里？我试图应用类并做了一些其他工作来使它工作，但没有解决我的问题。

Probalby因为我认为创造了新元素。非常欢迎任何提示和改进，谢谢。

无法将jquery应用于使用js创建的html

0 个答案: