0

Estoy creando un sistema de archivos adjuntos en sharepoint 2013, hice una dropdown con checkboxs para agregarlos a la pagina en forma de tecla, es decir un div con display inline-block y un anchor definido, el caso es que al interno de esta tecla tengo un boton para eliminar el archivo adjunto, solo que siendo creado dinamicamente no me toma el evento.

//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>

este es el codigo que estoy utilizando, como ven funciona, pero al momento de insertarlo en sharepoint este no funciona.

Metodos probados:

funcion onclick directamente en el boton onclick="$(this).parent().remove()"

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

pero ninguna me dio resultado, alguien sabria como tengo que hacer ?

1 respuesta 1

1

Necesitas acceder directamente al boton dentro de tu div #listaAllegati

$("#listaAllegati").on("click","#closeTile", function(){
   $(this).parent().remove(); 
});

Creo que esto es lo que buscas: Prueba

1
  • Gracias por tu respuesta amigo, lamentablemente el metodo para interactuar con los elementos dinamicos no me termina de funcionar, este fue el primer codigo que probe y por misterios que todavia no logro entender al interno de sharepoint no me funciona, mientras en local funciona a la perfeccion. lo que me ayudo en este caso fue cambiar .parent() por closest('div') y quitar la funcion del click en body que no me permitia interactuar con el evento para quitar el tile.
    – Federico
    Commented el 11 oct. 2018 a las 6:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.