Why doesn't jquery work after dynamically loading a page?

The bottom line is that the functions applied to the DOM after the upgrade are not valid, since all the elements are updated and the old events to them are erased. One solution is to reload all functions again after each loading "form.html".

How to do it? There is one easy solution: write all the necessary code into a separate function and call it every time. Example:

 function func() { $('.button0').click(function() { alert('Нажалось'); }); }; $(function() { func(); $('.button1').click(function() { $('.but').html('<button class="button0">Обновленная кнопка</button>'); func(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="but"><button class="button0">Нажми на меня</button></p> <button class="button1">Обновить</button> 

But in general for events of pressing, guidance, global events can be used, but in your case this is not appropriate. Example:

 $(function() { $(document).on('click', '.button0', function() { alert('Нажалось'); }); $('.button1').click(function() { $('.but').html('<button class="button0">Обновленная кнопка</button>'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="but"><button class="button0">Нажми на меня</button></p> <button class="button1">Обновить</button> 

We check if the content has changed only then we add the item.

 $("body").on('DOMSubtreeModified', "#content", function() { $('input[advancedtype="searchselect"]').after('<div class="drophelp">TEST</div>'); }); 

On an event, make $().remove() , then $().append() ; The second option is to change the event through $().css('display', none) ;