草庐IT

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

coder 2024-07-18 原文

我有一个脚本，我要在其中添加一个文件 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>

最佳答案

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

关于javascript - 将事件放在事件中是否正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48585165/

javascript事件button39filejquery

有关javascript - 将事件放在事件中是否正确？的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  2. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  3. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  4. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

    我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

  5. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  6. ruby - 检查日期是否在过去 7 天内 - 2

    我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？ 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/

  7. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  8. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  9. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  10. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗？ - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

随机推荐