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 %>

我的Javascript目录中有jQuery

---

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

既然您有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
        }
    })
})

---

有了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
        }
    })
})

---

有两种方法可以添加侦听器：

将侦听器添加到某些特定元素：

document.getElementById（“…”）.addEventListener（类型，fn）

或

document.querySelector（“…”）.addEventListener（类型，fn）

将侦听器添加到父元素，并使用匹配器：

document.addEventListener（type，fn）

其中

fn

检查

event.target.closest（“#cart\u land\u id”）

是否存在，然后继续

在您的情况下，使用jquery会有所帮助，因为有一个速记：

$(document).on("change", "#cart_land_id", function(event){
  Rails.ajax({
    url: "/carts?land=" + event.target.value,
    type: "GET"
  })
})

侦听器是在文档上设置的（没有其他可用于目标的元素），但只有从

\cart\u land\u 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;
  });

---

有关更多信息，请参见。添加侦听器有两种方法：

将侦听器添加到某些特定元素：

document.getElementById（“…”）.addEventListener（类型，fn）

或

document.querySelector（“…”）.addEventListener（类型，fn）

将侦听器添加到父元素，并使用匹配器：

document.addEventListener（type，fn）

其中

fn

检查

event.target.closest（“#cart\u land\u id”）

是否存在，然后继续

在您的情况下，使用jquery会有所帮助，因为有一个速记：

$(document).on("change", "#cart_land_id", function(event){
  Rails.ajax({
    url: "/carts?land=" + event.target.value,
    type: "GET"
  })
})

侦听器是在文档上设置的（没有其他可用于目标的元素），但只有从

\cart\u land\u 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;
  });

---

有关更多信息，请参见

谢谢您的回复。我仍然得到：

null不是一个对象（计算“$”（“body”）。on'）

感谢您的回复。我仍然得到：

null不是一个对象（计算“$”（“body”）。on'）

终于发生了一些事情。至少可以识别on_更改，但我得到

找不到变量：Rails

。当我使用

$时，ajax

他开始查找，我得到

加载资源失败：服务器响应状态为404（未找到）

。如果我的carts控制器中有特定操作，我想我必须编写

url:“/carts/land=“+event.target.value，

”？感谢您的快速回复。我会继续努力，然后给出反馈。你知道Rails.ajax

是不是一个错误，应该是
$.ajax
？如果这是真的，你能在你的回答中更正它吗，这样我们就可以保持一个清晰的轨迹了？或者，如果我做错了什么，请纠正我。对不起，我从不在本机替代方案可用时使用库。不需要jQuery或任何其他ajax东西，
fetch
是一种方法。
Rails.ajax
不是原生的，它是一些js库。使用本机
fetch
。终于发生了一些事情。至少可以识别on_更改，但我得到
找不到变量：Rails
。当我使用
$时，ajax
他开始查找，我得到
加载资源失败：服务器响应状态为404（未找到）
。如果我的carts控制器中有特定操作，我想我必须编写
url:“/carts/land=“+event.target.value，
”？感谢您的快速回复。我会继续努力，然后给出反馈。你知道Rails.ajax
是不是一个错误，应该是
$.ajax
？如果这是真的，你能在你的回答中更正它吗，这样我们就可以保持一个清晰的轨迹了？或者，如果我做错了什么，请纠正我。对不起，我从不在本机替代方案可用时使用库。不需要jQuery或任何其他ajax东西，
fetch
是一种方法。
Rails.ajax
不是原生的，它是一些js库。改为使用本机
fetch
。