Question

我遇到的问题是.on（click（））事件适用于通过对话框生成的段落，但不是通过textbox entry（）方法创建的。当我检查它们时，ID是正确的，格式与对话框创建的段落相同，但它们不适用于click事件。点击动态创建的段落甚至根本不会触发点击事件。我需要做些什么来解决这个问题？感谢。

HTML：

<html>

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="main.js"></script>
</head>

<body>


    <input type="text" id="txtTask" onkeydown="entry();"/>

    <div id="taskBox" class="debugBox">



    </div>

</body>

JS：

var tasks = [];
var content = "";

$(document).ready(function (){

for(var i = 0; i < 5; i++) { 
    content = prompt("Enter a task", i);

    if(content != "") {

        addTask(content, "yellow");

    };
};

for(var i = 0; i < 5; i++) { 
    console.log(tasks[i].Content);
};

    $( 'p' ).on( "click", function() {

    console.log("clicked");
    removeTask(this.id);

});


 });



function entry()  {
if (event.keyCode == 13) { 
    var ent = txtTask.value.toString();

    if(ent != "") {

        addTask(ent, "yellow");

    };

    console.log("input = " + txtTask.value);
    txtTask.value='';
 };
 };

function addTask(content, color) {
tasks[tasks.length] = {
    Content: content,
    Color: color,
    isActive: true
};

$('#taskBox').append('<p id="' + tasks[tasks.length - 1].Content + '">' + tasks[tasks.length - 1].Content + '</p>');
};

function removeTask(content) {
for(var i = 0; i < tasks.length; i++){

    if(tasks[i].Content === content && tasks[i].isActive === true) {

        tasks[i].isActive === false;

        $('#' + tasks[i].Content).remove();
    }

};
};

Answer 1

试试这个：

$(document).on('click', 'p', function() {
    console.log("clicked");
    removeTask(this.id);
})

编辑：

我被要求解释。因此，简而言之，问题是事件绑定到已经加载的DOM元素。 $(document)选择一个静态父级（可以是document或任何其他未动态更改的父级）。第二个参数'p'是我们希望与作为第三个参数传递的函数绑定的元素的选择器。

JQuery与动态创建的内容？

1 个答案: