Jquery does not execute in content loaded with the . load() function

Question

I’m trying to load a page using the Jquery function. load(), I use a modal to display the content on the main page, the problem is that within the modal has some functions that depend on jQuery (input mask, Jquery Datepicker and others), and do not perform at all. No error is shown in the console.

Here’s an example I did in codepen, to try to illustrate the problem, if you look at the close button it doesn’t work, and you can’t find it in the modal body.

Main archivehttps://codepen.io/laercionunesc/pen/NYBKpw/ File called by . load() https://codepen.io/laercionunesc/pen/jzpNwx

I am available for further clarification on the problem.

Answer 1

Need to use e.stopPropagation(); and a callback after the .load. I also noticed that the .popover only works after the second click, so I added a .trigger.

Example:

$('.editar').on('click', function(e){
   e.stopPropagation();
   var $this = $(this);
   var remote = $this.data('load-remote');
   console.log(remote);
   $('#exampleModal').load( remote, function(){
      $(this).modal();

      $('.popover-test').on('click', function(){
         $('.popover-test').popover({
            container: 'body'
         });
      }).trigger('click');
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<h1>Modal com .load()</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary editar" data-toggle="modal" data-load-remote="https://codepen.io/laercionunesc/pen/jzpNwx.html" data-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
</div>