I am creating an attachment system in sharepoint 2013, I made a dropdown with checkboxs to add them to the page as a key, that is to say a div with inline-block display and a defined anchor, the case is that inside this button I have a button to delete the attached file, only that being created dynamically the event does not take me.
//Dropdown checkboxes function
//show options
$("#custom-select").on("click", function(){
$("#custom-select-option-box").toggle();
});
//mark option as selected
function toggleFillColor(obj) {
$("#custom-select-option-box").show();
if ($(obj).prop('checked') == true) {
$(obj).parent().css("background", "#c6e7ed");
}else {
$(obj).parent().css("background", "#FFF");
}
}
// check and uncheck the option by clicking
$("#custom-select-option-box").on("click",".custom-select-option", function(){
var checkBoxObj = $(this).children("input");
if ($(checkBoxObj).prop('checked') == true){
$(checkBoxObj).prop("checked", false);
}else {
$(checkBoxObj).prop("checked", true);
}
toggleFillColor(checkBoxObj);
checkbox();
});
//hide the option box clicking out of the box
$("body").on("click", function(e){
if (e.target.id != "custom-select" && e.target.className != "custom-select-option"){
$("#custom-select-option-box").hide();
}
});
//function to prinnte the checked options
function checkbox(){
//get the checkbox element
var checkboxes = document.getElementById("custom-select-option-box");
var checkboxesChecked = [];
var titles = [];
// loop over them all
for (var i=0; i < $(checkboxes).children("div").length; i++) {
// stick the checked ones onto an array...
if ($(".custom-select-option:nth-child("+(i+1)+")").children("input").prop("checked") == true) {
checkboxesChecked.push($(".custom-select-option:nth-child("+(i+1)+")").children("input").val());
titles.push($(".custom-select-option:nth-child("+(i+1)+")").text());
}
}
if(checkboxesChecked.length > 0){
$("#listaAllegati").html("<tr><th>Allegati:</th></tr>");
}
for (var i = 0; i < checkboxesChecked.length; i++){
var link = "<a href='"+checkboxesChecked[i]+"'>"+titles[i]+"</a>";
$("#listaAllegati").append("<div id='tile'>"+link+"<button type='button' id='closeTile'> X </button> </div>");
}
}
//remove the current tile clicking in the in the close button "X"
$("#listaAllegati #tile").on("click","button#closeTile", function(){
$(this).parent().remove();
});#checkbox-dropdown-container {
background: transparent;
padding: 20px;
margin-bottom: 12px;
}
.option-container{
background: transparent;
max-height: 173px;
overflow-x: auto;
}
.custom-select {
background: #FFF;
display: inline-block;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: middle;
border: #333 1px solid;
color: #444;
border-radius: 2px;
width: 100%;
cursor: pointer;
}
.custom-select img{
margin: -4px 0px;
float:right;
height: 20px;
}
div#custom-select-option-box{
max-height: 113px;
min-height: 113px;
overflow-x: auto;
background: #FFF;
border: #80b2bb 1px solid;
color: #3892a2;
border-radius: 2px;
width: 100%;
z-index: 1;
display: none;
}
.custom-select-option{
width: 100%;
padding: 5px 15px;
margin: 1px 0px;
cursor: pointer;
}
.custom-select:hover{
background: #e9e9e9;
}
result-list{
padding-bottom: 20px;
color: #333;
line-height: 25px;
}
html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
/***************** Lista allegati ******************/
#listaAllegati th{
line-height: 30px;
}
#listaAllegati td{
line-height: 18px;
}
#tile{
background: rgba(190,190,190,0.2);
display: inline-block;
margin: 5px;
padding: 10px;
color: #333;
font-weight: 700;
border-radius: 6px;
}
#tile button{
border: none;
color: red!important;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<body>
<div id="customSelect">
<div class="custom-select" id="custom-select">Seleziona gli allegati<img src="https://png.icons8.com/ios/50/000000/down-squared-filled.png"></div>
<div id="custom-select-option-box">
<div class="custom-select-option">
<input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="name" value="<a href='#'>link</a>">link
</div>
<div class="custom-select-option">
<input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="name" value="<a href='#'>link2</a>">link2
</div>
<div class="custom-select-option">
<input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="name" value="<a href='#'>link3</a>">link3
</div>
<div class="custom-select-option">
<input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="name" value="<a href='#'>link4</a>">link4
</div>
</div>
</div>
<div id="listaAllegati">
</div>
</body>This is the code I'm using, as you see it works, but when you insert it in sharepoint it does not work.
Proven methods:
onclick function directly on the onclick="$(this).parent().remove()" button
function on $("#listaAllegati #tile").on("click", "#closeTile", function(){...});
$("#listaAllegati #tile").on("click","button#closeTile", function(){...});
$(document).on("click","button#closeTile", function(){...});
$(document).on("click","#closeTile", function(){...});
but none of them worked for me, would someone know how to do it?