0

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

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

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

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

摘要：导致自动触发的OnButtonClick()触发器。我有一个值，我需要在.OnFileUploaderClick()OnFileUploaderChange()OnButtonClick()OnFileUploaderChange()

我怎样才能做到这一点？！当函数在两者之间被调用时，如何获取我在OnButtonClick()函数中知道的值并使其在函数中可用（将其传递给） 。OnFileUploaderChange()OnFileUploaderClick()

我已经弄清楚如何OnFileUploaderClick()通过更改$("#fileUploader").click()为$("#fileUploader").trigger('click', [ 2 ]). 但是该参数仅在内部可用OnFileUploaderClick()，我需要在OnFileUploaderChange().

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

这是一个帮助解释的小提琴：https ://jsfiddle.net/ho819tu0/1/

编辑解决方案：

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

4

2 回答 2

1

我不相信有一种方法可以将参数传递给文件上传更改事件的函数处理程序。正如我在评论中提到的，我认为另一种解决方案是<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>

于 2019-10-23T17:55:51.000 回答
1

问题是在初始气泡之外创建的任何 dom 对象和事件都不会被调用，并且这些事件/函数不会设置任何参数或全局变量

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

左边的赋值必须是一个包含未来“实时创建”对象的对象，右边是一个引用这些对象的选择器

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>

于 2019-10-23T15:56:51.930 回答