I attempted to implement functionality similar to a Trello Card when editing a card, where users are prompted with options to edit, move, or copy the card.
Here is an example of my code:
$(document).ready(function() {
$('i').click(function() {
text = $(this).parentsUntil('ul').text();
$('body').addClass('bckg');
console.log(text);
// alert(text);
$(this).parentsUntil('li').append('<textarea class="textarea">' + text + '</textarea><ul class="opts"><li><a href="#">Edit</a></li><li><a href="#">change icon</a></li><li><a href="#">delete</a></li></ul><br><br><br><button class="btn btn-success">Save</button>');
});
$('body').on('blur', 'textarea', function() {
textarea = $(this).val()
$(this).parentsUntil('ul').text(textarea);
$(this).remove();
// $(this).sibling('button').remove();
$('body').removeClass('bckg');
console.log(textarea);
})
}).textarea {
position: absolute;
left: 0px;
z-index: 100;
float: left;
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 100;
list-style-type: none;
/*background: #FFF;*/
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li style="position: relative;">Option1 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
<li style="position: relative;">Option2 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
<li style="position: relative;">Option3 <a href="JavaScript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
</ul>The script above functions as intended in replacing the <li> text with the text from the <textarea>. However, after the jQuery Event .blur(), I encounter an issue where I lose the edit icon <i> that has an event handler bound to it. This prevents me from calling it again from the second time onward. What changes can I make to keep the edit icon along with its event handler intact even after changing the text? Thank you.