Rails：javascript addEventListener 未找到动态表单中的元素
我试图通过 AJAX 在 Rails 应用程序中实现动态表单，并做了一些教程，但没有成功。
资产文件夹中我的应用程序 js 文件中的 Javascript 部分
var land = document.getElementById("cart_land_id");
land.addEventListener("change", function(){
Rails.ajax({
url: "/carts?land=" + land.value,
type: "GET"
})
})
对于视图中的此表单：
<%= form_for @cart, :url => {:action => "show_shipping"}, :html => {:method => "get"} do |f| %>
<%= f.select :land_id, options_for_select(@lands.map { |l| [l.name.titleize, l.id] }, {:id => 'lands_select', :prompt => "select a country"}) %><br>
<%= f.select :shippingservice_id, options_for_select([]) %><br>
<%= f.submit "Calculate shipping" %>
<% end %>
呈现为：
<form accept-charset="UTF-8" action="/carts/show_shipping/4" class="edit_cart" id="edit_cart_4" method="get">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<select id="cart_land_id" name="cart[land_id]"><option value="1">Afghanistan</option>
...
<select id="cart_shippingservice_id" name="cart[shippingservice_id]"></select><br>
<input name="commit" type="submit" value="Calculate shipping" />
</form>
产生
TypeError: null is not an object (evaluating 'land.addEventListener')
我的 Javascript 目录中有 jQuery。
为什么会发生这种情况？我该如何解决？
有两种方法可以添加侦听器：
-
向某个特定元素添加侦听器：
document.getElementById("...").addEventListener(type, fn)或document.querySelector("...").addEventListener(type, fn)。 -
使用匹配器向父元素添加侦听器：
document.addEventListener(type, fn)，其中fn检查event.target.closest('#cart_land_id')是否存在，然后继续。
对于您的情况，使用 jquery 会有所帮助，因为有一个简写：
$(document).on("change", "#cart_land_id", function(event){
Rails.ajax({
url: "/carts?land=" + event.target.value,
type: "GET"
})
})
侦听器是在文档上设置的（没有其他元素可以作为目标），但只有来自
#cart_land_id
的冒泡被发送到侦听器。
更新
要发出 ajax 请求，您绝对可以使用
fetch
- 大多数浏览器都原生支持该请求，并且可以进行 polyfill。
fetch("/carts?land=" + event.target.value).
then(function(resp) { return resp.text(); }).
then(function(text) {
// do something with text
// for instance replace the content of some element:
someEl.innerHTML = text;
});
有关更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
由于您有 jQuery，您可以使用以下代码
$("body").on("change", "#cart_land_id", function(event){
var landValue = $("#cart_land_id").val();
$.ajax({
url: "/carts?land=" + landValue,
type: "GET",
success: function(response) {
// handle response here
}
})
})