Question

当用户输入一个字符串时，每个字符被分成一个数组并显示为＆＃34; row＆＃34; like this。但是当在JS生成的元素上使用click事件处理程序时，它不会附加到被单击的div，而是are appended to #node_list。如何附加到单击的div？

HTML

<input id='input' type='text'></input>
<button id='parse_seq' type="button">Parse</button>
<div id='node_list'></div>

JS

// Fetch input
var inseq = $("#input").val()

// Split each input character into array
var seqarr = inseq.split("")

// Loop over array to create div for each character
for (var i = 0, len = seqarr.length; i < len; i++) {

    // Prepend button to list
    if (i == 0) {
        CreateNewButton(i)
    }

    // Add node
    CreateNode(i+1,seqarr[i].toUpperCase())

    // Add button
    CreateNewButton(i+1)
}

// Create div
function CreateNode(id,content) {
    $("#node_list").append("<div id='seq_node" + id + "' class='seq_node'><span class='node_id'>" + id + "</span><span class='node_content'>" + content + "</span></div>")
}

// Create new button
function CreateNewButton(id) {
    $("#node_list").append("<div id='new_node" + id + "' class='new_node'>+</div>")
}

$('#node_list').on('click', '.new_node', function() {
    $(this).append(CreateNode(1,"new"))
    $(this).append(CreateNewButton(1))
})

Answer 1

您可以修改函数以接收元素作为参数。然后只是附加到那个论点。例如：

// Create div
function CreateNode(id,content, node) {
    node.append("<div id='seq_node" + id + "' class='seq_node'><span class='node_id'>" + id + "</span><span class='node_content'>" + content + "</span></div>")
}

// Create new button
function CreateNewButton(id, node) {
    node.append("<div id='new_node" + id + "' class='new_node'>+</div>")
}

然后当你调用函数时：

$('#node_list').on('click', '.new_node', function() {
    CreateNode(1,"new", $(this))
    CreateNewButton(1, $(this))
})

.append（）到JS创建的元素与.on（＆＃39;点击＆＃39;）

1 个答案: