调用侦听器事件时，Javascript 数据不会持续存在

Posted 2023-05-09

【中文标题】调用侦听器事件时，Javascript 数据不会持续存在

【英文标题】：Javascript data doesn't persist when listener event is invoked

【发布时间】：2020-07-14 21:42:45

【问题描述】：

如何让 ruby​​ 数据持久保存到 javascript 调用的事件中？

---

我遇到了关于 javascript 变量的问题。这可能是由于我对范围和使用哪个变量缺乏了解，尽管我尝试了不同的变量类型。 （这是我的第一个实际 javascript 代码）。我在 javascript 中看到范围的方式是这样的：如果它在函数中声明，则不能在函数之外使用它。如果您首先声明它（在函数外部），您可以更新函数中的值并在外部使用它，稍后在不同的标签中使用。我做到了。

我在做什么：我正在遍历一组从 ruby​​ 模型中获得的名称，这里：

 <% @items.each do |record| %>

稍后在我的代码中，我在这个 .each 中打开另一个脚本 html 标记：

 <script> edit_items("<%=record.name%>") </script>

这个“edit_items”函数为我提供了一个包含所有记录关系名称的数组。 （这是在页面顶部声明的）

y=[];

function edit_items(x)
      y.push(x);

我遍历这些项目的原因是为每个项目创建侦听器（它们是为用户服务的，因此每个用户都会有一个动态数量）。我有一个带有 li 元素的 ul，其中包含指向模式弹出窗口的链接（html 在同一页面上）。

我想要做的是告诉 javascript 将模式中的输入 (#name_box) 的值设置为来自单击的链接的信息。虽然一个文本框有多个链接，所以我必须指定将哪个 id 发送到该框。在页面底部：

$(document).ready(function() 
    console.log("ready");

    for (id = 0; id < y.length; id++)
        console.log("starting li click events");
        $("#" + y[id]).click(function () 
           console.log("y: " + y[id]);
           console.log("doc: " + document.getElementById(y[id]));
        );
    
);

我正在为通过 ruby​​ 数组中的动态数据创建的每个链接创建事件侦听器。问题是：直到页面在客户端时才会运行单击操作。我认为您无法从客户端侦听器获取服务器端数据（ruby）。

当我单击链接时，我在 console.log 中得到了这个：

y: undefined
admin:318 doc: null
admin:317 y: undefined
admin:318 doc: null

这意味着，对我来说 y 存在，但没有设置，并且 doc 没有价值（没有找到具有未定义数据的元素）。

【问题讨论】：

y 可能在您在这里尝试使用它的上下文中不可用。你在哪里声明 edit_items 函数？因为除非它是全局声明的，你几乎肯定不想这样做，否则它将无法在 $(document).ready(function() 中使用。

@ellitt 在 html 页面的顶部声明它。

我认为您可能会以不同的方式执行此操作，而不是尝试将单击事件绑定到基于 javascript 数组的元素。因此，如果您对此持开放态度，我可以尝试写一个更详细的答案。

当然，我对想法持开放态度。我正在使用 Ruby 2.6.5 和 Rails 6.0.2

@ellitt 我明白了....:) 不要浪费你的时间，我还是会看看你要说什么，但我会在下面给出我的答案也做了。

【参考方案1】：

问题不在于数据没有从 ruby​​ 数组中持久化。问题在于 for 循环 id 没有被持久化到侦听器操作事件中。呃，这个动作将在 for 循环完成后运行。 （只是用数组的所有元素设置监听器）

将 javascript 代码编辑为：

$(document).ready(function() 
    console.log("ready");
    for (id = 0; id < y.length; id++)
        $("#" + y[id]).click(function () 
            let id = document.getElementById(this.id).id
            document.getElementById("name_box").value = id
        );
    
);

选择被点击元素的id（这意味着我是什么......在元素上下文中），将名称框的值设置为id。哇！