Question

编辑2 - 我决定用jsfiddle创建一个简单的例子。

http://jsfiddle.net/VqA9g/61/

如您所见，我正在尝试引用新的div。

编辑 - 否定投票和不明确的问题

我有一个像这样的链接列表：

var struct_list = function () {
    this.id = 0;
    this.name = 0;
    this._head = null;
};
struct_list.prototype = {

// .. adding code , delete code ...

list_contents: function () {
    var current = this._head;
    while ( current != null ) {
        var div = document.createElement("div");
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.background = "white";
        div.style.color = "black";
        div.style.top = "0px";
        div.style.left = "0px";
        div.style.margin = "400px 1000px auto"; 
        div.style.cursor = "pointer";
        div.innerHTML = current.name;
        div.onclick = function ( v ) { var d = document.getElementById('div'); alert(d)};
        document.body.appendChild(div);
        current = current.next;
    }
    return null;
},};

我希望能够显示此链接列表，并且显示的每个项目都能够与“onclick”进行交互。

示例：

struct_list.add ( 0 , "Zero" );
struct_list.add ( 1 , "One" );

struct_list.list_contents（）;

_________________________________________________________________________
|                                                                        |
| <clickable> "Zero" that does a function(id) that passes over its ID(0) |
|________________________________________________________________________|
|                                                                        |
| <clickable> "One" <same as above>                                      |
|________________________________________________________________________|

对不起如果我不清楚的话。如果仍然不清楚会不会重复。道歉。

我有一个链接列表结构，我保存数据（它经常更改数据），我有一个setInterval来刷新它。我的问题是如何在仍然能够点击公开内容的同时列出结构的内容，我现在已经设置了链表中的每个内容都包含一个id。另外，如何确保y轴自动溢出？我猜我必须将它放入已启用的div中。

但我真正的问题是如何公开链接列表元素，同时还能通过onclick与它们进行交互。

我也不想使用纯javascript以外的任何东西。

示例（在我看来）可能是这样的：

<div id="PopUp">
    <script>
        setInterval(function() {
            if ( struct_qued_list ) {
                struct_qued_list = false;
                main.struct_list.list_contents(); // the linked list
            }
        }, 100);
    </script>
</div>


list_contents: function () {
    var current = this._head;
    while ( current != null ) {
        var div = document.createElement("div");
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.background = "white";
        div.style.color = "black";
        div.style.top = "0px";
        div.style.left = "0px";
        div.style.margin = "400px 1000px auto"; 
        div.style.cursor = "pointer";
        div.innerHTML = current.name;
        div.onclick = function ( v ) { var d = document.getElementById('div'); alert(d)};
        document.body.appendChild(div);
        current = current.next;
    }
    return null;
},

任何帮助或合乎逻辑的方法都将受到赞赏。

Answer 1

这主要是一个范围问题，在您的Edit 2 fiddle中，警报未定义，因为您的i获得了值2以便离开循环。

这是一个可能的解决方案：Live demo (jsfiddle)

!function(){
    var index = i; // Make it independant of i
    div.onclick = function () { alert(list[index]); };
}();

<小时/> 您还可以使用属性来存储任何值，并在函数中使用this来检索它。

或者将整个过程导出到另一个函数以获得如下内容：

for ( var i = 0; i < 2 ; i++ ) {
    doSomething(i);
}

Answer 2

当您向DOM添加新内容时，JavaScript有时很难将其选中。您可能需要使用DOM突变事件（如DOMNodeInserted）将事件侦听器添加到文本节点。

 document.addEventListener('DOMNodeInserted', function(){

     document.getElementById('thing').addEventListener('click', function(){
         alert('yey!');
     });

 });

如果要插入节点而不删除所有旧节点，则可能需要为函数命名，以便也可以删除它们。是的，这是纯粹的javascript。

编辑：对于您的溢出问题，您可以在插入时为每个节点分配一个类，并通过CSS设置类的样式

 .classname {
     overflow: auto;
 }

Javascript创建可点击文本

2 个答案: