[英]How to append div using $(this) selector in Jquery?
I have two div tag which is created dynamically at runtime. 我有两个在运行时动态创建的div标记。 That tag class name is
MainFolder
该标记类名称为
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>
On click function in Jquery 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>');
});
I want to create the div tag under the selected element. 我想在所选元素下创建div标签。
I am trying to make div element under the one of div tag where user clicked 我正在尝试在用户点击的div标签之一下制作div元素
If I try this below code. 如果我尝试下面的代码。 It is creating on both folder.
它是在两个文件夹上创建的。 But when I use $(this),its not working
但是当我使用$(this)时,它不起作用
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo('.MainFolder');
You need to append to $(this)
instead of the parent element of clicked MainFolder
您需要附加到
$(this)
而不是单击的MainFolder
的父元素
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));
Also, remove the height
style from the MainFolder
另外,从
MainFolder
删除height
样式
Demo 演示
$(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>
Edit 编辑
Looks like you are making an ajax call after on click, so save a reference to $(this)
看起来您在点击后就进行了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);
});
have checked at jsfiddle. 已经检查了jsfiddle。 it works.
有用。
$('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);
})
Change From 变更自
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this).parent());
to 至
$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.