我大约有100个图标,当我选择其中一些图标时,它们会出现在以下div块中:
这是我如何生成上面的结构:
$(this).addClass("active");
str += '<div class="liveicon" id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'">';
str += '<span class="close-icon" id="close-icon">✖</span>';
str += '<span id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'" class=" anyi '+clss+'"></span>';
str += '<div class="clearboth"></div>';
str += '<div class="codes">';
str += '<div class="tit">FONT</div><input type="text" class="fontsc" value="[anyicon i=\''+clss+'\' '+stylestr+']">';
str += '<div class="tit">PNG</div><input type="text" class="pngsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'png\']">';
str += '<div class="tit">SVG</div><input type="text" class="svgsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'svg\']">';
str += '</div>';
str += '</div>';
$(".selected .content").append(str);
我想向关闭图标添加一个链接,这是一个跨度类,因此在单击以删除相关图标之后。我尝试添加
<a href="#"></a>
然后使用js处理,但这不是正确的方法。任何想法都欢迎。这是整个Js文件,可轻松定向:
$(document).on('click', ".loadarea .content .anyicons .anyi", function () {
//$(".anyicon .anyi").on('click', function(e) {
var type = $(this).attr("dtype");
var clss = $(this).attr("dclss");
var attr = $(this).attr("dattr");
var id = type+''+clss;
//console.log(type);
var str = "";
var style = $("#anyicon_styles").val();
var stylestr = "style=\''+style+'\'";
if(style == "0"){ style = ""; stylestr = ""; }
if($(this).hasClass("active")){
$(this).removeClass("active");
$(".selected .content .liveicon#"+id).remove();
loadLibraryMsg();
} else {
$(this).addClass("active");
str += '<div class="liveicon" id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'">';
str += '<span class="close-icon" id="close-icon">✖</span>';
str += '<span id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'" class=" anyi '+clss+'"></span>';
str += '<div class="clearboth"></div>';
str += '<div class="codes">';
str += '<div class="tit">FONT</div><input type="text" class="fontsc" value="[anyicon i=\''+clss+'\' '+stylestr+']">';
str += '<div class="tit">PNG</div><input type="text" class="pngsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'png\']">';
str += '<div class="tit">SVG</div><input type="text" class="svgsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'svg\']">';
str += '</div>';
str += '</div>';
$(".selected .content").append(str);
loadLibraryMsg();
}
});
附言:如果您认为自己提出的问题不是很好,请向我发送教程,以帮助您解决问题。提前致谢
最佳答案
您必须使用event-delegation:-
$(".selected .content").on('click','.close-icon',function(){
$(this).closest('.liveicon').remove();
});
如果没有用,请尝试以下方法:-
$(document).on('click','.close-icon',function(){
$(this).closest('.liveicon').remove();
});