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，如果他们这样做，则会触发回调。

JavaScript加载时间不足

1 个答案: