将事件放入事件中是否正确? [英] Is it correct to put an event inside an event?

问题描述

我有一个脚本，将在其中添加文件XLS，一旦我验证了文件格式，便关闭引导程序的模式并打开另一个模式，这是一个确认窗口，以查看用户是否确定要上传该文件.

I have an script in which I'm going to add a file XLS, once that I validate the file format, I close a bootstrap's modal and open another modal which is an confirmation window to see whether the user is sure to upload that file.

此确认窗口上有一个确认按钮，单击后，我希望执行我要执行的功能，该功能将运行AJAX向服务器发出请求.

This confirmation window has a confirmation button, once clicked I want that execute me an function which it's going to run an AJAX to make the request to the server.

但是，因此，我有以下疑问:

However, because of that, I had the following doubts:

• 这两种方法中哪种更好(也是最正确)来运行代码，为什么?
• 如果没有事件更改，为什么要执行第一个输入文件的单击事件?我的意思是，我添加了一个文件，并且执行了事件更改，并且我可以多次单击，这是否不是我必须添加另一个文件以便可以再次在内部运行函数的原因?
• 将事件放入事件中，它有名字吗?

$(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>

推荐答案

将事件放入事件内，它有名字吗?

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

它的名字叫 Bad Idea .让我解释一下.当您执行以下代码时会发生什么.

It has, the name is Bad Idea. Let me Expain. What happens when you execute the following code.

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

单击事件已注册到按钮.注册事件后，无论您单击多少次，事件都会每次触发.

A click event is registered to the button. Once an event is registered, it will fire everytime no matter how many times you click.

当您将代码放入第一个示例中的另一个事件处理程序中时，每次文件输入更改并注册新的事件处理程序时，该代码便会执行.因此，当您选择一个文件，然后决定更改它，文件输入更改两次，您将注册2个click事件.现在单击按钮，您将通过单击一次获得2个新的控制台日志！！！试试吧.

When you put that code inside another event handler like the first example, it gets executed everytime the file-input changes and a new event handler is registered. So when you select a file, and then decide to change it, file-input changes twice and you get 2 click events registered. Now click on the button, you get 2 new console log printed by one click!!! Try it..

为什么第一个输入文件的点击事件被执行，如果有 不是事件更改

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

因为这就是事件处理程序的工作方式，所以您只需注册一次，之后便会被触发.

Because that's how event handler works, you register once, they get fired everytime after that.

以下两种方法中的哪一种更好(也是最正确)来运行代码 为什么?

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

显然不是第一个，因为这是一个坏主意，也不是第二个.在第二个事件的情况下，您将事件附加到将包含按钮的部门.因此，您无需单击按钮，只需单击按钮右侧的任意位置，事件就会被触发！！！

Obviously not the first one, because it is a bad idea, Not the second one either. In case of second one you are attaching event to a division that will contain the button. So you don't need to click on the button, just click anywhere right side of the button, the event gets fired!!!

所以，如果没有一个是对的，我们该怎么办?

• 对于此类简单任务，请不要通过javascript生成button/任何html元素.使用HTML做到这一点，简单明了.
• 请勿将事件处理程序嵌套到另一个事件处理程序中，即将一个事件处理程序放入另一个事件处理程序中，这会使事情复杂化.只需将所有事件处理程序直接放在 jQuery 的 document.ready 事件中即可. document.ready 仅触发一次.
• 当您需要控制用户操作时，请根据所需条件通过javascript显示/隐藏按钮或其他html元素.
• Do not generate button/any html element by javascript for such simple tasks. Do it with HTML, plain and simple.
• Do not nest event handler into another i.e put one event handler inside another, it will complicate things. Just put all event handlers directly inside document.ready event of jQuery. document.ready only fires once.
• When you need to control user action then show/hide your button or other html element by javascript based on required conditions.

我的建议是这样做.

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
    });
});

这篇关于将事件放入事件中是否正确?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！