-1

the issue I'm having is that the .on(click()) event works with the paragraphs generated through the dialog box, but not when they are created through the textbox entry() method. When I inspect them the IDs are correct and in the same format as the dialog-created paragraphs, but they don't work with the click event. Clicking on the dynamically created paragraphs doesn't even fire the click event at all. What do I need to do to solve this? thanks.

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();
    }

};
};
Zonata
  • 1

1 Answers1

0

Try this:

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

EDIT:

I was asked for an explanation. So, in a nutshell, the issue is that events are bound to DOM elements which are already loaded. $(document) selects a static parent (which may be document or any other parent that is not changed dynamically). The second argument 'p' is a selector for elements which we want to be bound with function that is passed as a third argument.

kurideja
  • 198
  • 1
  • 11
  • 1
    Please explain your solution. – Felix Kling Jan 07 '15 at 19:14
  • Hey that worked, thank you. So I guess instead of putting the CSS selector in the $(), I make it the second argument in the $(document).on? Thanks for the solution. – Zonata Jan 07 '15 at 19:19
  • @Zonata, Felix Kling marked this question as a duplicate. I advise you to read other answers here: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – kurideja Jan 07 '15 at 19:26
  • I apologize for posting a duplicate, I looked through a few other answers but didn't see a solution. Thanks for the solution and explanation. – Zonata Jan 07 '15 at 19:31