jquery - 在 SharePoint 2013 中使用 JQUERY 删除动态生成的 div
问题描述
我正在构建一个带有复选框下拉菜单的附件系统,在检查时我将附件的链接添加为图块。现在我遇到了一个问题,因为使用我用来删除点击的磁贴的代码,我无法观看 arround,但似乎没有一种解决方案有效。我在控制台中观看,但没有出现错误,因为浏览器无法处理我目前收到此代码的事件:
//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函数onclick="$(this).parent().remove()"
功能开启$("#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 页面时,没有任何一项工作,我现在真的不知道如何达到这个目标
解决方案
#tile
从您的点击事件中删除。它只适用于一位父母。所以你更新的代码将是
$("#listaAllegati").on("click","#closeTile", function(){
$(this).parent().remove();
});
推荐阅读
- azure - Azure 应用服务和应用网关 SSL 证书信息
- keycloak - 尝试加密 id 令牌时出现错误“无法获取加密 KEK”
- c# - WPF ReactiveUI 使用异步方法
- c# - 使用 C# net5.0 但没有 System.Drawing.Common 获取/设置图像文件的分辨率?
- flutter - 发生异常。FormatException (FormatException: Unexpected character (at character 1) using syncfusion_flutter_charts
- vue.js - Vue/Nuxt 路由问题:为什么在特定路由期间加载“错误”组件?
- python - Python 输入提示
- javascript - Javascript中的isSorted函数:如何在代码中使用for-of-loop
- python - 动态命名 Python 输出
- cassandra - 执行节点还原后在 cassandra 上发出 num_tokens - Cassandra 3.11.10 和 3.11.11