Rails -JavaScript-触发数据行为



我有以下按钮按预期执行并关闭/打开所需的灯箱:

<a data-behaviour="closing-lightbox" href="#edit-class" class="button">Edit Details</a>
<a data-behaviour="closing-lightbox" href="#move-class-year" class="button">Move Class</a>
<a data-behaviour="closing-lightbox" href="#delete-single-class" class="button button--error">Delete Class</a>

我试图在更改下拉措施时发生相同的行为:

<%= f.input_field :file, as: :file, data: {behaviour: 'file-upload closing-lightbox'}, href: '#upload-csv', class: 'file-upload-hide' %>

这不是触发的,也不将"关闭点框"函数分配给Onchange属性。我有什么办法可以将数据 - 行为和onchange属性组合起来,以便将其调用?

预先感谢

编辑:

我有以下内容:

$(document).ready(function(){
  $("#csv_file").on("change", function(){
    var box = document.getElementById("upload-csv")
    box.style.display = "block";
  })
});

我是否有任何方法可以使用HREF属性来调用此功能内部的数据键合方法(是否是一种方法?)?预先感谢!

数据属性只是将任何任意数据附加到元素的有效方法。

所以没有 - 它不是一种方法。您可以使用CSS属性选择器:

将事件处理程序附加到具有特定数据属性的元素上。

$(document).on('click', '*[data-behaviour="closing-lightbox"]', function(){
  console.log('Eureka!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-behaviour="closing-lightbox">Click me</button>

但是,使用类来附加行为实际上要快一些(更简单),因为它使用document.getElementsByClassNamedocument.querySelectorAll

最新更新