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

标签 javascript jquery html css

<分区>

我有这段代码,应该允许我执行我在代码段中执行的操作。它在代码段中有效,但在我的本地 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 绑定(bind)后加载的 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)');
    }
  });

});

关于javascript - 为什么我的图像按钮没有打开它应该打开的链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38405695/

上一篇:html - 如何仅针对某些行将 html 表单拆分为 2 列

下一篇:javascript - 通过参数清除缓存

相关文章:

javascript - 强制 View 从 valueconverter 内更新

jquery - jQuery 将表行分组

javascript - 模态和输入组插件中的 Bootstrap 弹出窗口

php - 使用 PHP 按日期过滤 SQL 结果

javascript - 下滑后div跳转

javascript - 使用 jQuery 修改 CSS 类的名称 - 无法加载

javascript - 获取特定 twilio 电话和特定出站电话 TWILIO 之间的短信历史记录

javascript - 使用变量调整 div 边距顶部 - jquery

javascript - .live 不是 rails 3.2.11 中的函数错误

html - 字体在本地不在服务器中不工作