我有两个在运行时动态创建的div标签。该标记类名为MainFolder
<div class="MainFolder" style="padding-left: 20px; width: 200px; height: 23px;">
<span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder1<br>
</div>
<div class="MainFolder" style="padding-left: 20px; width: 200px; height: 23px;">
<span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder2<br>
</div>
Jquery 中的点击函数
$(document).on('click', '.MainFolder', function () {
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this).parent());
//$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));
//$(this).appendTo('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>');
});
我想在所选元素下创建div 标签。
我正在尝试在用户单击的div 标签下制作div 元素
如果我尝试下面的代码。它正在两个文件夹上创建。但是当我使用 $(this( 时,它不起作用
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo('.MainFolder');
您需要附加到$(this)
而不是单击MainFolder
的父元素
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));
此外,从MainFolder
中删除height
样式
演示
$(document).on('click', '.MainFolder', function() {
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MainFolder" style="padding-left: 20px; width: 200px;">
<span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder1<br>
</div>
<div class="MainFolder" style="padding-left: 20px; width: 200px;">
<span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder2<br>
</div>
编辑
看起来您在单击后正在进行 ajax 调用,因此请保存对 $(this)
的引用
$(document).on('click', '.MainFolder', function() {
var $self = $(this);
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($self);
});
已经在JSFIDDLE上检查过。 它有效。
$('body').on('click', '.MainFolder', function(){
var html = '<div id="outer">Outer Div Content<div id="inner">'+
'Inner Div Content</div></div>';
var self = $(this);
self.parent().append(html);
})
更改自
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this).parent());
自
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));