gpt4 book ai didi

javascript - rails 中的 Ladda 加载按钮

转载 作者:行者123 更新时间:2023-12-05 07:57:31 24 4
gpt4 key购买 nike

我的 Rails 表单中有一个提交按钮,我想在用户点击提交时将其更改为旋转加载图标。我的应用程序正在使用 Bootstrap ,因此我遵循了提供的示例 here .

提交按钮的 Rails 代码如下所示:

<%= content_tag :button, :class => "btn btn-u ladda-button", :type => "submit", :data => { :style => 'expand-left' } do %>
<span class="ladda-label">Next</span>
<span class="ladda-spinner"></span>
<% end %>

呈现的 HTML 如下所示:

# in <head>
<script type="text/javascript">
$(document).ready(function(){
Ladda.bind( '.ladda-button' );
});
</script>

# submit button at the end of my rails form_for
<button class="btn btn-u ladda-button" data-style="expand-left" type="submit">
<span class="ladda-label">Next</span>
<span class="ladda-spinner"></span>
</button>

我在我的 assets/javascripts 文件夹中包含了 ladda.js 和 spin.js。 ladda-themeless.css 包含在我的样式表 Controller 中。

当我单击下一步按钮时,按钮内的文本会更改颜色(变为深灰色)。 Chrome 控制台现在显示以下错误:

Uncaught TypeError: undefined is not a function application.js:17884createSpinnerapplication.js:17884instance.start application.js:17577(anonymous function)

最佳答案

包装

Ladda.bind( 'input[type=submit]' );

部分进入 $(document).ready 包装器。如果您使用 Turbolinks,请使用:

$(document).on('ready page:load', function(){
Ladda.bind('.ladda-button');
});

关于javascript - rails 中的 Ladda 加载按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26947879/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com