I am currently in the process of developing an application that empowers users to generate new items, modify existing items, or delete items by utilizing corresponding icons located adjacent to each item.
When it comes to existing items, the action icon displays upon hovering with an event handler attached to it, specifically an onClick event handler for this scenario.
$(document).ready(function() {
var ul = `
<ul class="list-inline in-item" style="padding: 10px;">
<li><a href="#"><i class="fa fa-plus-circle icon-add"></i></a></li>
<li><a href="#"><i class="fa fa-pencil-square-o icon-edit"></i></a></li>
<li><a href="#"><i class="fa fa-trash-o icon-remove"></i></a></li>
<li><a href="#"><i class="fa fa-arrows-v icon-move"></i></a></li>
</ul>
`;
$('.item').hover(
function() {
$(ul).insertBefore($(this).find('.item-head'));
},
function() {
$(this).find('ul.list-inline').remove();
});
$('body').on('click', '.icon-add', function() {
// Add Item
items = `
<div class="item">
<h3 class="item-head" contenteditable>[Type Item Here] [label]</h3>
<p contenteditable>[Type what it does]</p>
</div>
`;
// $('body').append(item);
$('.item-container').append(items);
return false;
});
$('body').on('click', '.icon-edit', function() {
// Edit on Item
});
$('body').on('click', '.icon-remove', function() {
// Remove Item and its definition
});
$('body').on('click', '.icon-move', function() {
// Move item up or down
});
}).item-head {
color: #365efe;
}
.action-icon {
float: left;
margin-top: 25px;
margin-left: -40px;
}
.icon-add {
color: #4caf50;
}
.icon-edit {
color: #00bcd4;
}
.icon-remove {
color: #f44336;
}
.icon-move {
color: #9e9e9e;
}
.in-item {
display: block;
}
.out-item {
display: none;
}
.list-inline>li:last-child {
padding-right: 25px;
}
.list-inline {
float: left;
background: transparent;
position: absolute;
left: -110px;
top: 12px;
height: 40px;
}
div.item {
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-sm-12">
<div class="message"></div>
<h3>Preview</h3>
<div class="container" style="border: 1px solid #ccc;width: 70%;">
<div class="row">
<div class="col-xs-12 item-container">
<div class="item">
<h3 class="item-head" style="float: left;">Customer [form]</h3>
<p style="clear: both;">Customer is module for recording information related to customer such as Name, Address, Date of Birth, Place of Birth, ID Number, etc.</p>
</div>
<div class="item">
<h3 class="item-head">First Name English [label]</h3>
<p class="definition">The name that was given to you when you were born and that comes before your family name. This field accepts only English Characters.</p>
</div>
<div class="item">
<h3 class="item-head">Salutation [label]</h3>
<p>A greeting in words or actions, or the words used at the beginning of a letter or speech. This field has values such as Mr, Ms, Miss.</p>
</div>
</div>
</div>
</div>
</form>
</div>However, newly created items from the add icon lack the associated action icons and functionality present in existing items, appearing identical to the current items. What steps can be taken to ensure that newly created items also function similarly to existing items? Thank you!