javascript - 将事件放在事件中是否正确？

Question

我有一个脚本，我要在其中添加一个文件 XLS，一旦我验证了文件格式，我就关闭 Bootstrap 的模态并打开另一个模态，这是一个确认窗口，用于查看用户是否确定要上传那个文件。

此确认窗口有一个确认按钮，单击后我希望它执行一个函数，它将运行 AJAX 以向服务器发出请求。

但是，正因为如此，我有以下疑惑:

• 运行代码的两种方式中哪一种更好(也是最正确)？为什么？
• 如果没有事件变化，为什么第一个输入文件的点击事件会被执行？我的意思是，我添加一个文件并执行事件更改，我可以根据需要多次点击，难道我不应该添加另一个文件以便我可以再次运行里面的功能吗？
• 把一个事件放在一个事件中，它有名字吗？

$(document).ready(function(){
  //First input file
  $(document).on('change','#file', function(){
    let file = $(this);
    let nameFile = file[0].files[0].name;
    let button = '<button type="button">Clic input 1</button>';
    
    $('#button').html(button);
    
    $('#button').click(function(){
      console.log('CLICK IN FIRST INPUT FILE!');
    });
    
  });
  
  //Second input file
  $(document).on('change','#file2', function(){
    let file = $(this);
    let nameFile = file[0].files[0].name;
    let button = '<button type="button">Clic input 2</button>';
    
    $('#button2').html(button);
  });
  
  $('#button2').click(function(){
      console.log('CLICK IN SECOND INPUT FILE!');
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file" />
<div id="button"></div>

<div style="margin-top:20px"></div>

<input type="file" id="file2" name="file2"/>
<div id="button2"></div>

Answer 1

Put an event inside an event, has it a name?

有，名字是Bad Idea。让我解释一下。当您执行以下代码时会发生什么。

$('#button').click(function(){
  console.log('CLICK IN FIRST INPUT FILE!');
});

点击事件被注册到按钮。注册事件后，无论您点击多少次，它都会每次触发。

当您像第一个示例那样将该代码放入另一个事件处理程序中时，每当文件输入发生变化并且注册一个新的事件处理程序时，它都会执行。因此，当您选择一个文件，然后决定更改它，文件输入更改两次，您注册了 2 个点击事件。现在点击按钮，你可以一键打印 2 条新的控制台日志!!!试试吧..

Why is the click event of the first input file executed if there has not been an event change

因为这就是事件处理程序的工作方式，您注册一次，之后每次都会被解雇。

Which of the 2 ways is better (and the most correct) to run the code and why?

显然不是第一个，因为这是个坏主意，也不是第二个。在第二个的情况下，您将事件附加到将包含按钮的分区。所以你不需要点击按钮，只要点击按钮右侧的任何地方，事件就会被触发!!!

So if none of them is right, what can we do?

• 不要为这种简单的任务通过 javascript 生成按钮/任何 html 元素。使用 HTML 实现，简单明了。
• 不要将事件处理程序嵌套到另一个事件处理程序中，即将一个事件处理程序放在另一个事件处理程序中，这会使事情复杂化。只需将所有事件处理程序直接放入 jQuery 的 document.ready 事件中。 document.ready 只触发一次。
• 当您需要控制用户操作时，根据需要的条件通过 javascript 显示/隐藏您的按钮或其他 html 元素。

My suggestion is doing something like this.

$(document).ready(function(){
    // Hide the button at first
    $('#button').hide();
    // When File-input changes
    $('#file').change(function(){
        if(**the file-input has a file selected**){
            $('#button').show();
        }
        else{
            $('#button').hide();
        }
    });
    // When Button Clicked
    $('#button').click(function(){
        // Do the action
    });
});