javascript - 使用 Ajax 附加到 Jade 中的下拉列表

Question

我正在尝试将条目添加到我在 .jade 文件中定义的下拉列表，如下所示。

extends layout

block content
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
    script(src='/javascripts/addsystem.js')
    h1= title
    p Testing


    select#allSystems

我的 Ajax 方法如下所示:

var select = $('#allSystems');
console.log("Runing script")


$.ajax({
  url: '/submit/getAllSystems',
  dataType:'JSON',
  success:function(data){

    $.each(test.system, function(key, val) {
        select.append('<option id="' + val.id + '">' + val.name + '</option>'); 
    })
  }
});

Ajax 脚本位于 Jade 文件中包含的 JS 文件中。 (Jquery 也包含在 Jade 文件中)。

除了附加之外，一切似乎都工作正常。 IE。控制台日志始终显示良好的数据，并且在 Ajax 脚本中打印选择对象时，浏览器会将其识别为 HTML 元素。

当打印正在运行的“console.log(select);”时，Firefox 控制台显示以下内容:

Object { context: HTMLDocument → submit, selector: "#allSystems" }

知道我做错了什么吗？

Answer 1

Jade 是一种模板语言，必须使用数据进行编译和执行才能呈现 HTML。 JQuery 不会自动为您执行此操作，这就是您对 select.append 的注释尝试失败的原因。

自己构建 HTML 是可行的(尽管它会生成一些丑陋的代码，而且我仍然不喜欢字符串连接)。但是，当您这样做时，您更改为 .appendTo，它将尝试获取您的 select 对象并将其附加到 option，我认为这不是你想要的。

试一下:

select.append('<option id="' + val.id + '">' + val.name + '</option>');

如果这不起作用，则说明您的选择器出现了问题，可以为您提供 select 变量。

* 编辑* 我注意到在你的 Jade 中，你是在 DOM 的其余部分之前加载脚本的。如果 addsystem.js 的内容如您所描述的那样，那么您正在获取数据并尝试将其附加到尚不存在的 DOM 节点。尝试像这样包装它:

$(function(){ /** your code **/ })

这是 jQuery 方法的简写，用于在 DOM 完全加载后执行操作。