Сортируемый пользовательский интерфейс Jquery не имеет e.target для дочерних элементов

#javascript #jquery #jquery-ui

Вопрос:

У меня есть сортируемый список папок с использованием пользовательского интерфейса jQuery.

Дело в том, что у папок есть дочерний элемент, который является кнопкой удаления. Я пытаюсь получить этот элемент и с помощью 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>

Ответ №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) {

1. Только один вопрос, что $(function(){}) делает?

2. Это сокращенная форма $(document).ready(function() { — она просит jQuery запустить эту функцию, когда DOM будет полностью готов. Делая это, вы удостоверяетесь, что все задействованные элементы страницы действительно существуют и готовы к манипулированию.

Ответ №2:

$(this) это не то, что вы думаете.

onClick Событие привязано к <div class="deleteBtn"> , это ~~the <div class="deleteBtn">~~ на самом деле это window объект, а не <div class="folder"> , поэтому селектор не находит никаких родственных функций () с .name классом.