CODEWITHSUNDEEP
javascriptjqueryjquery-ui
einstein
einstein

Reputation: 13850

Jquery UI sortable have no e.target on children

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>

Upvotes: 1

Views: 238

Answers (2)

andyb
andyb

Reputation: 43823

$(this) is not what you think it is.

The onClick event is bound to the <div class="deleteBtn">, this is the <div class="deleteBtn"> actually the window object and not the <div class="folder"> which is why the selector is not finding any siblings() with the .name class.

Upvotes: 0

Pointy
Pointy

Reputation: 413846

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

Upvotes: 2

Related Questions