Question

我有一个使用JQuery UI的可排序文件夹列表。

问题是文件夹有一个子元素，它是一个删除按钮。我尝试获取该元素，并使用jquery获取该文件夹的名称。但我发现可排序函数会破坏所有e.target。以下是删除文件夹的代码

<script>
function deleteFolder(){
    var name = $(this).siblings('.name').html();//this is undefined
    var folder = $(this).parents('.folders');
    $.ajax({
        url: 'serverScripts/home/deleteFolder.php',
        data: {name: name},
        success: function(text){
            if(text == 'success'){
                folder.remove();
            }

        }
    });
};
</script>
<div class='folder>
    <div class='name'>Hello</div>
    <div class='deleteBtn' onclick='deleteFolder()'>Delete</div>
</div>

Answer 1

使用jQuery绑定事件处理程序而不是“onclick”属性会好得多：

 <script>
   $(function() {
     $('.folder .deleteBtn').click(function() {
        var name = $(this).siblings('.name').html();//this is undefined
        var folder = $(this).parents('.folders');
        $.ajax({
          url: 'serverScripts/home/deleteFolder.php',
          data: {name: name},
          success: function(text){
            if(text == 'success'){
              folder.remove();
            }
          }
        });
      });
    });
</script>

当您使用老式的“onclick”属性绑定事件处理程序时，jQuery无法帮助您。当您执行上述操作时，库可以规范化“事件”对象，正确建立this等。如果您需要事件对象，可以声明处理程序的参数：

     $('.folder .deleteBtn').click(function(event) {

Answer 2

$(this)不是您认为的那样。

onClick事件绑定到<div class="deleteBtn">，此是 ~~<div class="deleteBtn">~~ 实际上是window对象而不是<div class="folder">这就是选择器没有找到.name类的任何兄弟姐妹（）的原因。

Jquery UI可排序对子项没有e.target

2 个答案: