为什么我的图像按钮没有打开它应该打开的链接

Why does my image button not open the link that it should?

本文关键字：链接 我的 按钮 为什么 图像      更新时间：2023-09-26

我有这段代码，应该允许我做我在代码片段中做的事情。它在代码片段中有效，但在我本地的 php 文件中不起作用。

我有 jquery 库并且所有内容都可以正确调用，但我使用的图像没有激活应该在代码片段中出现的输入文件类型。

$('.image-upload-btn').on('click', function() {
  var input = document.createElement('INPUT');
  input.type = 'file';
  input.style.display = 'none'
  $('html body').append(input);
  input.click();
  input.onchange = function() {
    $('.image-upload-btn').css('background-image', 'url(http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png)');
  }
});
.image-upload-btn {
  background-image: url('http://bread.pp.ua/n/settings_g.svg');
  background-position: center;
  background-size: cover;
  width: 50px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class='image-upload-btn'></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$('.image-upload-btn').on('click', function(){
     var input = document.createElement('INPUT');
     input.type = 'file';
     input.style.display = 'none'
     $('html body').append(input);
     input.click();
     input.onchange = function(){
         $('.image-upload-btn').css('background-image', 'url(http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png)');
     }
});
</script>
<style type="text/css">
.image-upload-btn{
    background-image: url('http://bread.pp.ua/n/settings_g.svg');
    background-position: center;
    background-size: cover;
    width: 50px;
    height: 50px;
}
</style>
<div class='image-upload-btn'></div>

可能是在jquery绑定后加载的html，试试这个

$(document).ready(function(){  
  $('.image-upload-btn').on('click', function() {
    var input = document.createElement('INPUT');
    input.type = 'file';
    input.style.display = 'none'
     $('html body').append(input);
     input.click();
     input.onchange = function() {
     $('.image-upload-btn').css('background-image', 'url(http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png)');
    }
  });
});
相关文章：