JavaScript 加载超时

Question

我在一个 Rails 项目中工作，我正在做一个简单的点击提醒功能，如下所示：

html.erb

<%= button_tag 'button', type: 'button', class: 'right-button' %>

JavaScript

$(".right-button").on("click", alert("right-button clicked!"));

问题是当我加载页面（ctrl + F5）时，甚至没有按下按钮就触发了警报，当我按下按钮时，什么也没有发生。我已经尝试过使用：

$(document).ready(function() { 
});

但它也没有工作。我什至尝试将 JavaScript 放入 html.erb：

<%= button_tag 'button', type: 'button', class: 'right-button' %>
<script type="text/javascript">
  $(".right-button").on("click", alert("right-button clicked!"));
</script>

如果你知道发生了什么，请帮忙，谢谢！

PS：Turbolinks 被禁用！

Answer 1

那是因为您会立即调用您的alert。函数后的括号表示您正在调用该函数。

您想要做的是从在您的点击处理程序的回调中调用alert，这样当为您的点击事件调用回调时，alert 就会触发。

// Incorrect
$(".right-button").on("click", alert("Immediately Invoked"));

// Correct
$(".right-button").on("click", function() {
  alert("Invoked on-click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="right-button">Click Me!</button>

此外，如果元素是动态注入的，您将不得不求助于事件委托来处理。

$('.add-section').on('click', function() {
  $('#container').append('<section><button class="click-me">Click Me!</button></section>');  
});

$('#container').on('click', '.click-me', function() {
  alert('Event delegation!!!!!!!!!!!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="container">
  <button class="add-section">Add section!</button>
</div>

它的作用是针对动态内容的父节点并将点击处理程序附加到它。我们传递与将动态添加的节点匹配的选择器。在#container 内的节点上发生的任何点击都将被检查以查看它们是否与.click-me 匹配，如果匹配，则将触发回调。