javascript - rails : javascript addEventListener does not find element in dynamic form

Question

我正在尝试通过 AJAX 在 Rails 应用程序中实现动态表单，并编写了一些教程，但没有成功。

Assets 文件夹中我的应用程序 js 文件中的 Javascript 部分

var land = document.getElementById("cart_land_id");
land.addEventListener("change", function(){
  Rails.ajax({
    url: "/carts?land=" + land.value,
    type: "GET"
  })
})

对于 View 中的此表单:

<%= 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="&#x2713;" /></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。

为什么会发生这种情况以及如何解决这个问题？

Answer 1

有两种添加监听器的方法:

1. 向某些特定元素添加监听器:document.getElementById("...").addEventListener(type, fn) 或 document.querySelector("... ").addEventListener(type, fn).

2. 使用匹配器向父元素添加监听器: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 - 大多数浏览器都原生支持它，并且可以进行多填充。

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了解更多信息