如何将 parameter/argument 传递给由调用 click 以编程方式触发的 onchange 侦听器

Question

在我的一组重复行（动态创建）的表单中，每行都有一个按钮，允许用户上传一个文件，然后 linked/tied 到该行中的数据。

head   head    upload
----   ----    --------
x      y       <button>
a      b       <button>
m      n       <button>

单击这些按钮中的任何一个时，我显然可以轻松确定我所在的行。假设我在 id="row_2" 的行中。我在单击按钮调用的函数中有它。

现在我调用 $("#fileUploader").click() 以启动文件选择对话框。当用户选择一个文件并单击确定时，将自动调用 OnFileUploaderChange() 函数。在该函数中，我获得了文件，现在我需要知道初始按钮来自 row_2，因此我可以 link/associate 它具有正确的行。

总结：OnButtonClick()触发OnFileUploaderClick()导致OnFileUploaderChange()自动触发。我在 OnButtonClick() 中有一个值，我需要在 OnFileUploaderChange().

中可用

我该怎么做？！如何在 OnButtonClick() 函数中获取我知道的值，并在调用 OnFileUploaderClick() 函数时使其在 OnFileUploaderChange() 函数中可用（传递给）。

我已经弄清楚如何通过将 $("#fileUploader").click() 更改为 $("#fileUploader").trigger('click', [ 2 ]) 来将参数传递给 OnFileUploaderClick() 函数。但是该参数仅在 OnFileUploaderClick() 中可用，我在 OnFileUploaderChange().

中需要它

用户可能会开始上传一个大文件，并且（当该文件仍在上传时）会开始上传另一个较小的文件，以便多个线程同时上传。所以 以任何方式使用全局变量都行不通 - 它必须是 parameter/argument 以避免竞争条件和时间问题。

这里有一个fiddle来帮助解释：https://jsfiddle.net/ho819tu0/1/

用解决方案编辑：

根据@vincent-d 的评论和下面的回答（现在标记为正确）我已经修复了我的代码，这里是另一个 fiddle 展示它是如何工作的：https://jsfiddle.net/sm2L9kt8/

Answer 1

问题是在初始气泡之外创建的任何 dom 对象和事件都不会被调用，并且这些 events/functions

不会设置任何参数或全局变量

为了解决这个问题，jQuery 制作了一个非常好的函数，负责对这些实时创建的对象创建新的调用

左边的赋值必须是包含未来 "live created" 个对象的对象，右边是引用这些对象的选择器

var colors=['green','yellow','blue'];
$('.add').click(function(){
  let num=Math.floor(Math.random() * 3);
  var newHtml='<td>line 1 <button class="clicker">click to set to <span>'+colors[num]+'</span></button></td>'
  $('table tr').append(newHtml);
});

// click on add, it will set a new button, click on that button it will pass to this function because of the live event call

function colo(colorvar){
  $('td').css('color',colorvar);
}

//this is the call, notice the body as left-hand, and .clicker button as right-hand

$('body').on('click','.clicker',function(){
// this refer to the element in the right-hand that is clicked (it can be a child, check at event target for more infos
  colo($('span',this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='add'>ADD</button>
<table>
<tr>
<td>line 1 <button class='clicker'>click to set to <span>red</span></button></td>
</tr>
</table>

Answer 2

我认为没有办法将参数传递给文件上传更改事件的函数处理程序。正如我在评论中提到的，我认为另一种解决方案是对每一行使用唯一的 <input type="file">，以便您的更改处理程序具有对 ID 的引用。您可以设置隐藏上传器的样式并使用标签来触发点击：

function OnFileUploaderChange(inputElem) {
  output.textContent = inputElem.id;
}

input[type="file"] {
  visibility: hidden;
  width: 0;
}

label {
  background: #fefefe;
  border: 1px solid black;
  padding: 0 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Head1</th>
    <th>Head2</th>
    <th>Upload</th>
  </tr>
  <tr class="row" id="row_1">
    <th>Row_1</th>
    <th>A</th>
    <th>
      <label for="file_row_1">U</label>
      <input id="file_row_1" type="file" onchange="OnFileUploaderChange(this)">
    </th>
  </tr>
  <tr class="row" id="row_2">
    <th>Row_2</th>
    <th>B</th>
    <th>
      <label for="file_row_2">U</label>
      <input id="file_row_2" type="file" onchange="OnFileUploaderChange(this)">
    </th>
  </tr>
  <tr class="row" id="row_3">
    <th>Row_3</th>
    <th>C</th>
    <th>
      <label for="file_row_3">U</label>
      <input id="file_row_3" type="file" onchange="OnFileUploaderChange(this)">
    </th>
  </tr>
</table>
<div id="output"> </div>

如何将 parameter/argument 传递给由调用 click 以编程方式触发的 onchange 侦听器

How can I pass a parameter/argument to the onchange listener that is programmatically triggered by a call to click

javascript

jquery

dom-events

jquery-trigger