Jquery Сортировка только пожаров после второго щелчка

Question

Я включил функцию сортировки jquery на свой сайт и прекрасно работает с одним незначительным исключением. Он работает только после того, как я нажимаю один раз на странице. Раздел страницы, в которой находятся отсортированные элементы, загружается после запроса ajax, поэтому я использую функцию «on». Мне бы хотелось разобраться, как заставить это работать, не нажимая сначала.

$(document).on("mousedown.sortable", "#container", function() { 
 
    $("#container").sortable({ 
 
    update: function(event, ui) { 
 
     var data = $(this).sortable("serialize"); 
 
     $.ajax({ 
 
     data: data, 
 
     type: 'POST', 
 
     url: 'myurl' 
 
     }); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"> 
 
</script> 
 
<div id="mainContainer"> 
 
    <ul id="container"> 
 
    <li id="item-1">Item 1</li> 
 
    <li id="item-2">Item 2</li> 
 
    </ul> 
 
</div>

Для тех, кто читает это позже, ключ к принятому ответ, чтобы иметь часть JQuery кода загружается каждый раз, когда часть HTML загружается в документ с помощью AJAX, а не в «основном» фрагменте кода, который загружается при первой загрузке самой страницы.

Answer 1

Вам не нужно обработчик MouseDown событий (удален здесь), так как это является причиной сортировкой быть добавлены только после того, как вы делаете свой первоначальный щелчок (как описано сами)

$("#container").sortable({ 
 
    update: function(event, ui) { 
 
    var data = $(this).sortable("serialize"); 
 
    $.ajax({ 
 
     data: data, 
 
     type: 'POST', 
 
     url: 'myurl' 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"> 
 
</script> 
 
<div> 
 
    <ul id="container"> 
 
    <li id="item-1">Item 1</li> 
 
    <li id="item-2">Item 2</li> 
 
    </ul> 
 
</div>