如何以编程方式侦听 jquery 触发的点击答案

【问题标题】：How to listen on jquery programmatically triggered click如何以编程方式侦听 jquery 触发的点击
【发布时间】：2019-08-20 10:01:08
【问题描述】：

我有以下文件上传策略，我在按钮点击文件输入时触发点击事件，但我无法监听触发的点击事件。能够监听以编程方式触发的点击的最佳方法是什么

$('#add-attachment').on( 'click', function(e) {
  e.preventDefault();
  var $fileList = $('#file-list'), attachementMarkup = '<li><input type="file" class="file"><span class="remove"></span></li>';
  $(attachementMarkup).find('input[type="file"]').trigger('click');

  //get the value of triggered file input
  $('body').on('click', 'input.file', function() {
    console.log($(this).val());
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add-attachment">Add files</button>

<ul id="file-list"></ul>

【问题讨论】：

标签： jquery events dynamic triggers

【解决方案1】：

有问题：

您的 input.file click 事件在您尝试调用它之后被连接。将点击事件处理程序移到其他点击事件处理程序之外（不要嵌套事件处理程序）
您的 body.on(click) 不会触发，因为您的文件输入未附加到正文
出于浏览器安全原因，控制台日志将为空白，具体取决于浏览器

// get the value of triggered file input
$('body').on('click', 'input.file', function() {
  console.log($(this).val());
})

$('#add-attachment').on('click', function(e) {
  e.preventDefault();
  var fileList = $('#file-list');
  var attachementMarkup = '<li><input type="file" class="file"><span class="remove"></span></li>';
  var li = $(attachementMarkup).appendTo(fileList);
  li.find('input[type="file"]').trigger('click');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add-attachment">Add files</button>

<ul id="file-list"></ul>

【讨论】：

【解决方案2】：

$('#add-attachment').on( 'click', function(e) {
  e.preventDefault();
  var $fileList = $('#file-list'), attachementMarkup = '<li><input type="file" class="file"><span class="remove"></span></li>';
  $(attachementMarkup).find('input[type="file"]').click();

  //get the value of triggered file input
  $('body').on('click', 'input.file', function() {
    console.log($(this).val());
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add-attachment">Add files</button>

<ul id="file-list"></ul>

【讨论】：

感谢您的反馈。你确定在工作吗？您在控制台中看到一些输出吗？我刚试过你的 sn-p 但似乎不起作用。
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。不清楚您做了什么更改或为什么这会产生任何影响（提示：.click() 与.trigger("click") 相同）。 meta.stackoverflow.com/questions/300837/…
所以您的问题与未触发点击无关您的“附件标记”变量包含一个在任何地方都找不到的 html 字符串。因此它不起作用。