表单内的按钮不可访问答案

【问题标题】：Button inside a form is not accessible表单内的按钮不可访问
【发布时间】：2018-10-16 08:07:19
【问题描述】：

我正在尝试使用 jQuery 触发表单内按钮的单击事件。

$(".switchLang").on("click", function(e) {
  console.log("Clicked!")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline" action="">
  <button type="button" class="btn mr-3 btn-link transparent switchLang">${{index.keys.lng}}$</button>
  <button type="button" class="btn mr-3 btn-outline-light">${{index.keys.login}}$</button>
  <button type="button" class="btn btn-primary">${{index.keys.getStarted}}$</button>
</form>

上面的函数没有被调用！

经过研究，我尝试了许多解决方案，但没有任何效果。就像在函数里面加e.preventDefault();一样，也去掉.click，换成.on等等，但是没有用！

我已经提到了这个问题：here。

谢谢。

已解决

我仔细检查了我的代码。 html 是在 text/template 类型的脚本中编写的，并且此模板在 jquery 代码之前呈现。谢谢。

【问题讨论】：

是在调用$(document).ready(function(){...});
我将您的代码放入一个 sn-p 中，它似乎可以正常工作。按钮是在初始加载后动态添加到页面的吗？#
您好@RoryMcCrossan 感谢您的编辑，是的，它在 .ready 触发器中
您提供的代码确实有效。你的问题一定在别处。是否有任何（不可见的）内容元素覆盖了您的按钮？
@KhaledRamadan 例如，我的意思是通过 AJAX 加载的 HTML。

标签： javascript jquery html events event-handling

【解决方案1】：

你可以试试

$(document).on("click",".switchLang",function (e) {
    console.log("Clicked!")
});

【讨论】：

【解决方案2】：

试试这个可能会有帮助

$(document).on('click', '.switchLang', function (e) {
    console.log("Clicked!")
});

【讨论】：

【解决方案3】：

在添加点击处理程序之前，您需要等待文档准备好，如下所示：

   $(document).ready(function () {
       $('.switchLang').on('click', function (e) {

           console.log("Clicked!")
       });
    });

【讨论】：