我正在构建一个带有复选框下拉列表的附件系统,选中该复选框后,我会将链接添加为图块。 现在我遇到了一个问题,因为使用我用来删除单击的图块的代码,我看不到周围的声音,但是似乎没有一个解决方案起作用。我在控制台中观看,但未出现错误,原因是浏览器无法处理该事件 我现在得到了这段代码:
//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","#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>
我尝试了以下方法:
在按钮onclick="$(this).parent().remove()"
中单击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(){...});
但是当我把它放到sharpoint页面时,却没有任何一项工作,而且我现在真的不知道该怎么实现
答案 0 :(得分:0)
从您的点击事件中删除#tile
。仅与一位父母一起使用。因此您的更新代码将为
$("#listaAllegati").on("click","#closeTile", function(){
$(this).parent().remove();
});