Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

NiloLeon's avatar

Laravel Javascript and Render sections

Hi I did a webapp with laravel, with various forms that add datas to database and then refresh only some sections (for example insert an order, then insert some products...etc), but when section render javascript doesn't work anymore. I have some Jquery that catch some events...for example some click buttons. EXAMPLE

PART of script in the HEAD

 <script src="{{ asset('public/js/jquery-3.5.1.min.js') }}"></script>
    <script src="{{ asset('public/js/vendor/popper.min.js') }}"></script>
    <script src="{{ asset('public/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('public/js/vendor/holder.min.js') }}"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function(){

            $(document).ajaxSend(function() {
            $("#overlay").fadeIn(300); 
            });

            $('#searchPolizza').keydown(function (e) {
              if (e.keyCode == 13) {
              e.preventDefault();
              $value=$(this).val();
                $.ajax({
                    type : 'get',
                    url : "{{ url("/trova") }}",
                    data:{'numero':$value},
                    success:function(data){
                    $('#RefreshContent').replaceWith(data);
                    //initRefundsFunctions();
                    //initDossierListClick();
                    }
                });
              }
            });

$( "#addDossier" ).click(function( event ) {
          event.preventDefault();

          //$("#addDossierForm")[0].reset();
          var r = confirm("Vuoi veramente creare un nuovo dossier?");
            if (r == true) {
                       ....continue.......</script>

After i found a "polizza" calling ajax '#searchPolizza' Then i refresh content section

Part of RefreshContent section where i have a form with button #addDossier that i can press after refresh section related to first search

<div class="" style="zoom:90%">
  <form class="form-inline" id="addDossierForm"> 
    <input type="text" class="form-control mb-2 mr-sm-2" placeholder="dossier" id="dossier">
    <input type="date" class="form-control mb-2 mr-sm-2" placeholder="data sinitro" id="date_cla">
  <button type="submit" class="btn btn-primary mb-2" data-customer_id="@isset($customer_id){{$customer_id}}@endisset" id="addDossier"><i class="fa fa-plus" aria-hidden="true"></i></button>
  </form>
</div>

But jquery cannot catch anymore the click event

I tried to put all script in the head or also to create function to recall but it doesn't work well. Is there another solution? Thx

0 likes
2 replies
MichalOravec's avatar
Level 75

Don't use .click() and .keydown()

Instead of

$(document).on('click', '#addDossier', function(e) {
    // your code
});

$(document).on('keydown', '#searchPolizza', function(e) {
    // your code
});

.on() works with dynamically added elements.

NiloLeon's avatar

wow, ok there is a doc? it works! So I cannot use Jquery? Someone suggest me to use VUE.js? Or is better use .on() Thks

Please or to participate in this conversation.