form_for表单的字符计数器未实时更新计数

Question

我实现了一个表单text_field字符计数器，它在jsfiddle中工作，但在应用程序中不工作。它出现了，但不会像在jsfiddle中那样实时计数。当我重新加载页面时，它会计算text_field中的当前字符。

我在页面中确实有更多的javascript，但我尝试通过删除所有其他java而不是coutner来测试它，但它仍然不起作用。

同样奇怪的是，我有一个

minlength: 20, maxlength: 1000

未经验证时，将显示一个带计数的切换，并将实时计数，直到达到最小长度。我的目标是将该计数器转换为text_field下，以便它始终显示/计数字符

这是我的代码：

<%= form.label :description %>
<%= form.text_area :description, class: "form-control message", :rows => 10, minlength: 20, maxlength: 1000, required: true    %>
<span class="countdown"></span>

Jquery：

jQuery(document).ready(function ($) {
updateCountdownAll();
$('.message').live('input', updateCountdown);
});
function updateCountdownAll() {
$('.message').each(function () {
updateCountdown(this);
});
}
function updateCountdown(e) {
var currentElement;
if (e.target) {
currentElement = e.target;
} else {
currentElement = e;
}
var maxLengh = $(currentElement).attr('maxlength');
var remaining = $(currentElement).val().length;
$(currentElement).nextAll('.countdown:first').text(remaining + '/' + maxLengh);
}

JSFiddle:http://jsfiddle.net/4bozw3k5/

我能对代码做些什么吗？让它在rails应用程序中运行？实时

Answer 1

首先，浏览器检查工具中有错误消息吗？你安装了gemjquery-rails吗？如果没有，请访问下面的链接并安装它。

https://rubygems.org/gems/jquery-rails/versions/4.3.1

其次，这可能是因为。live()已折旧，并根据1.9版完全删除。

请尝试使用事件处理程序.on()。

第三，这是一个非常多的代码，对于一些非常简单的东西来说，几乎有点像意大利面条代码。我会做些什么来简化它：

$(".message").on("keyup", function () {
var maxlength = $(this).attr("maxlength")
var remaining = $(this).val().length
$(this).next().text(remaining + '/' + maxLengh)
})

无需将其包装在$(document).ready()中，刷新应用程序时，过多的$(document).ready()会减慢加载时间(增加脚本编写时间)。根据您将rails应用程序设置为执行javascript的方式，您可以将所有javascript/jquery封装在一个大$(document).ready()中，而不是在刷新应用程序时执行一次。

此外，.on()是一个正在侦听并等待事件发生的事件侦听器，例如.on("keyup"，function()。您可以使用$(".message").off()关闭事件侦听器

有点过度共享，但了解事件侦听器和事件委派对于编写好的jQuery至关重要。