Jquery does not run on content loaded with the .load ()

Question

Jquery does not run on content loaded with the .load ()

Navigation

#1 by (1 votes)

1

I'm trying to load a page using the Jquery .load () function, I use a modal to display the content on the main page, the problem is that within the modal it has some functions that depend on jQuery (input mask, Jquery DatePicker and others), and they do not run in any way. No error is displayed on the console.

This is an example of what I did in codepen, to try to exemplify the problem, if you notice the close button does not work,

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

I am available for more clarification on the problem.

javascript jquery

asked by anonymous 03.04.2018 / 16:02

1 answer

Python: 'int' object is not iterable Random function maxlength plugin on ckeditor does not work

score 1 · Accepted Answer

You need to use e.stopPropagation(); and a callback after .load . I also noticed that .popover only works after the second click, so I added .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><linkrel="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><scriptsrc="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>