I have an ajax request where I load html code on it, its a slider of images with a class called dragscroll (its a js plugin that need this class to make it dragable https://github.com/asvd/dragscroll) when this piece of code is loaded by ajax it wont work, is it possible after ajax load make js work with the new content generated?
<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><style type="text/css">
ul {
display: flex;
list-style: none;
overflow-x: auto;
}
ul::-webkit-scrollbar {
width: 0px;
background: transparent;
}
li {
border: 1px solid black;
margin-right: 10px;
}
</style></head><body><div class="container"><div class="row"><div class="col-12 mt-5"><ul class="dragscroll"><li><img src="https://picsum.photos/id/172/200/300"></li><li class="li"><img src="https://picsum.photos/id/173/200/300"></li><li class="li"><img src="https://picsum.photos/id/174/200/300"></li><li class="li"><img src="https://picsum.photos/id/175/200/300"></li><li class="li"><img src="https://picsum.photos/id/176/200/300"></li><li class="li"><img src="https://picsum.photos/id/177/200/300"></li><li class="li"><img src="https://picsum.photos/id/178/200/300"></li><li class="li"><img src="https://picsum.photos/id/179/200/300"></li><li class="li"><img src="https://picsum.photos/id/180/200/300"></li><li class="li"><img src="https://picsum.photos/id/181/200/300"></li></ul></div></div><div class="row"><div class="col-12"><button id="loadAjax" type="button" class="btn btn-primary">Load Ajax</button></div></div><div class="row"><div class="col-12 mt-5" id="ajaxContent"></div></div></div><script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><script src="https://asvd.github.io/dragscroll/dragscroll.js"></script><script type="text/javascript">
$(document).ready(function() {
$('#loadAjax').on( "click", function() {
$.ajax({
type:'GET',
success: function(){
data = '<ul class="dragscroll">';
data += '<li>';
data += '<img src="https://picsum.photos/id/172/200/300">';
data += '</li>';
data += '<li class="li">';
data += '<img src="https://picsum.photos/id/173/200/300">';
data += '</li>';
data += '<li class="li">';
data += '<img src="https://picsum.photos/id/174/200/300">';
data += '</li>';
data += '<li class="li">';
data += '<img src="https://picsum.photos/id/175/200/300">';
data += '</li>';
data += '<li class="li">';
data += '<img src="https://picsum.photos/id/176/200/300">';
data += '</li>';
data += '<li class="li">';
data += '<img src="https://picsum.photos/id/177/200/300">';
data += '</li>';
data += '<li class="li">';
data += '<img src="https://picsum.photos/id/178/200/300">';
data += '</li>';
data += '<li class="li">';
data += '<img src="https://picsum.photos/id/179/200/300">';
data += '</li>';
data += '<li class="li">';
data += '<img src="https://picsum.photos/id/180/200/300">';
data += '</li>';
data += '<li class="li">';
data += '<img src="https://picsum.photos/id/181/200/300">';
data += '</li>';
data += '</ul>';
data += '</div>';
$("#ajaxContent").html(data);
}
});
});
});</script></body></html>