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,如果它们匹配,则将触发回调.