-6

I have a function that generates, what needs to be, a click-able check note. No problem with that, this is how the generated html code looks like.

<span class="edit">
   <i class="fa fa-pencil" aria-hidden="true"></i>
</span>

Then I try to create another function so that I could manipulate another div. Problem is that it does not seem that the button is clicking. This is how the function looks like:

$(".edit").on('click', function(){
    //function to edit tasks
        alert("The check was clicked.");
    });

Alert does not show up. Any ideas what might be wrong?

Adam Azad
  • 11,171
  • 5
  • 29
  • 70
user9043678
  • 1
  • 1

1 Answers1

1

Use event delegation:

$(document).on('click', '.edit', function(){
    //function to edit tasks
    alert("The check was clicked.");
});


var c = $('#c');
$('#add').on('click', function(){

c.append('<span class="edit"><i class="fa fa-pencil" aria-hidden="true"></i> Hello</span>');

});

$(document).on('click', '.edit', function(){
        //function to edit tasks
        alert("The check was clicked.");
});
div {
   margin-top:10px;
}
.edit {
   width:25px;
   height:25px;
   margin: 0px 10px 10px 0px;
   background:#000;
   color:#fff;
   padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="add">Add</button>
<div id="c"></div>
Adam Azad
  • 11,171
  • 5
  • 29
  • 70