Question

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

此确认窗口有一个确认按钮，一旦点击我想要执行一个函数，它将运行一个AJAX来向服务器发出请求。

然而，正因为如此，我有以下疑惑：

运行代码的两种方法中哪一种更好（也是最正确的）？为什么？
如果没有更改事件，为什么第一个输入文件的click事件会被执行？我的意思是，我添加了一个文件并且执行了事件更改，我可以根据需要多次点击，是不是我必须添加另一个文件以便我可以再次运行该函数？
在活动中加入一个活动，有一个名字吗？

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

Company Administrators

Answer 1

在事件中放置一个事件，有一个名字吗？

它的名字是错误的想法。让我来表达。执行以下代码时会发生什么。

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

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

当您将该代码放在另一个事件处理程序（如第一个示例）中时，每当文件输入更改并且注册一个新的事件处理程序时，它就会执行。因此，当您选择一个文件，然后决定更改它，文件输入更改两次，你会注册2个点击事件。现在点击按钮，你只需点击一下即可打印2个新的控制台日志！试试吧..

为什么第一个输入文件的click事件会被执行不是事件的变化

因为这是事件处理程序的工作原理，所以你注册一次，之后每次都会被解雇。

运行代码的两种方法中哪一种更好（也是最正确）为什么？

显然不是第一个，因为这是一个坏主意，也不是第二个。如果是第二个，您将事件附加到包含按钮的分部。因此，您无需单击按钮，只需单击按钮右侧的任何位置，即可触发事件!!!

所以如果它们都不对，我们能做什么？

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

我的建议是做这样的事情。

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

Answer 2

运行代码的两种方法中哪一种更好（也是最正确的）？为什么？

我相信这更好：

//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!');
});

主要是因为它更易读并易于理解。输入更改后，无需设置按钮单击事件。最好像你一样改变按钮的状态。更好的方法是隐藏/显示按钮，如：

$('#button2').show();

最初隐藏起来：

<div id="button2" style="display: none">Click me</div>

如果没有事件发生变化，为什么要执行第一个输入文件的click事件？

在我的测试中，这一切都正常。

怎么叫这个？

只有在单击并将文件指定给输入时才应调用更改事件。

Answer 3

您将同一事件多次绑定到同一个按钮对象。将同一事件绑定到另一个可能重新发生的事件中的相同对象将导致一遍又一遍地绑定它（堆栈事件并触发它们，在这种情况下，它“多次”）。将操作绑定到事件应该每个对象只发生一次。我看到你将click事件绑定到div而不是按钮。也许您需要考虑使用.on()这样的动态绑定

$(document).ready(function(){
  //first file change event
  $(document).on('change','#file', function(){
    let file = $(this);
    //handling empty selection
    if(file[0].files.length == 0){ 
        $('#button').html("");
        return;
    }
    let nameFile = file[0].files[0].name;
    let button = '<button type="button">Clic input 1</button>';
    
    $('#button').html(button);
  });
  //second file change event
  $(document).on('change','#file2', function(){
    let file = $(this);
    //handling empty selection
    if(file[0].files.length == 0){ 
        $('#button2').html("");
        return;
    }
    let nameFile = file[0].files[0].name;
    let button = '<button type="button">Clic input 2</button>';
    
    $('#button2').html(button);
  });
  
  //first button dynamic event (doesn't stack)
  $('#button').on('click','button', function(){
      console.log('CLICK IN FIRST INPUT FILE!');
    });
    
  //second button dynamic event (doesn't stack)
  $('#button2').on('click','button', 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>

请注意，您需要处理不选择文件（例如，文件数为0），就像我的代码

一样

Answer 4

在事件中放置一个事件，有一个名字吗？

它确实有一个名字。它被称为＆＃34;雏菊链接＆＃34;这不是一个好主意。

Answer 5

没有足够的代表发表评论

我有理由这样做。我有一个令人不快的任务，即通过一个人编写的2年代码，几乎没有维护或代码规则。我想保持代码结构完整，所以我用菊花链式点击事件来执行一些增强。

为了避免上述更好的答案中提到的一些问题，只需记住在绑定下一个事件之前调用$(selector).off("click")。

将事件放入事件中是否正确？

5 个答案: