Question

我试图用js创建一个图片上传按钮，它将具有以下功能....

1）点击（完成）

弹出文件选择器

2）从文件选择器中选择图像时，在引导程序弹出框内选择预览图像...

该按钮包含一个类型为file的输入标记，带有一个css类（.file-inputs），在元素上应用none的显示，所以我不能将popover添加到输入标记，因为popovers不是处理隐藏元素，当输入标记的值发生变化时，如何在可见按钮上显示弹出窗口

也许是这样的

＆＃13;

$('#photo').change()(function(){
  
if(!($("#photo").val() == '')){
  
  //Use bootstrap popover to show image over button
  
      
    });
  
  });

＆＃13;

这是按钮代码

＆＃13;

<button class="btn btn-default" rel="popover" id="btn-photo">
  <i class="glyphicon glyphicon-picture"></i>
  <input class="file-inputs" type="file" name="photo" id="photo" />
</button>

＆＃13;

这是js

＆＃13;

$(document).ready(function() {

  var img = '';

  //Event to display file chooser
  $('.post-box').on('click', '#btn-photo', function() {
    event.preventDefault();
    var elem = document.getElementById('photo');
    if (elem && document.createEvent) {
      var evt = document.createEvent("MouseEvents");
      // Event(event_type:String, bubbles:Boolean, cancelable:Boolean)
      evt.initEvent("click", false, true);
      elem.dispatchEvent(evt);


    }


  });

  // Show popover on button

  $("#btn-photo").popover({
    placement: 'top',
    trigger: 'click',
    title: 'Add a picture to your post! :)',
    content: img,
    html: true
  });
  // });

});

＆＃13;

Answer 1

快速回答是这样的：

$("#yourbutton").on("yourevent", function(){$("#otherbutton").trigger("click");});

如何在一个元素上创建一个事件会导致另一个元素上的bootstrap popover？

1 个答案: