Question

I have a sortable list of folders using JQuery UI.

The thing is that the folders have a child-element that is a delete button. I try to get that element and with jquery get the name of that folder. But I found out that the sortable function destroys all e.target. Below is the code of deleting a folder

<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

You’ll be much better off using jQuery to bind your event handler instead of an “onclick” attribute:

 <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>

When you bind the event handler with an old-fashioned “onclick” attribute, jQuery can’t help you. When you do something like the above, then the library can normalize the “event” object, establish this properly, etc. If you want the event object, you can declare an argument to the handler:

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