Question

我有两个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');

Answer 1

您需要附加到$(this)，而不是点击MainFolder的父元素

  $('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));

另外，从height

中删除MainFolder样式

<强>演示

$(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); });

Answer 2

检查了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);
    })

Answer 3

从

更改

$('<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));

如何在Jquery中使用$（this）选择器追加div？

3 个答案: