estevan gomez estevan gomez - 5 months ago 22
jQuery Question

jQuery-ui sortable() not working with jQuery onload

I am using jQuery .load function to import my page into index.html.

So this is my index.html:

<!doctype>
<html>
<head>

<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>


<div id="content"></div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="lib/jquery/jquery-ui.min.js"></script>


<script>


$(function() {

$('#content').load('mycontent.html');

$( ".row" ).sortable();
$( ".row" ).disableSelection();

});

</script>



</body>
</html>


and this is my other page that I'm including:

<div class="container">

<div class="row">
<div class="col-md-4">Sortable Div</div>
<div class="col-md-4">Sortable Div</div>
<div class="col-md-4">Sortable Div</div>
</div>

</div>


The problem is that when the included code is part of the index.html the sortable code works BUT when I use .load to include the html into the page it doesn't.

Why..and how can I fix this issue?

Answer

Did you try

$('#content').load('mycontent.html', function () {
   $( ".row" ).sortable();
   $( ".row" ).disableSelection(); 
});

The problem with your solution is that .row is not present when you load the page so sortable can't registred to that class.