我无法单击数据表行以将数据发送到Laravel 5.4中的文本字段

Question

I have a web app in Laravel 5.4 . In some modules, I have a main form from which datatables are called in a modal dialog window (for example: if I click on a search button, the modal window appears with the datatables in it ). What I am trying to achieve is that when I click on the data in the datatables it closes the modal window and get the clicked info and display it in a specified field in a form, the main form. But after I put all the necessary scripts, nothing happens when I click on the data in the datatable.

1. a. HTML Table

     <section class="panel"> <div class="table-responsive"> <table width="100%" id="pere-table" class="table" > <thead> <tr> <th>NNID</th> <th>Nom</th> <th>Post-Nom</th> <th>Prenom</th> </tr> </thead> <tbody> <tr > <td class="NNID"></td> <td class="nom"></td> <td class="postnom"></td> <td class="prenom"></td> </tr> </tbody> </table> </div> </section> <a href="#ajout_pere" data-toggle="modal" class="btn btn-success btn-lg"><small><span class="glyphicon glyphicon-plus"></span> Ajouter</small></a> 

   b.Input Field to receive Data has pere_nouv as its id

2. Controller fetching the data

     public function recherchePere () { $pere = Pere::join('t_individus','t_adultes.nnid', '=', 't_individus.nnid') ->select(['t_individus.nom', 't_individus.postnom', 't_individus.prenom', 't_individus.nnid']) ->where('t_individus.sexe','=','0'); return Datatables::eloquent($pere)->make(true); } 

3. the ajax for the datatable

     @push('scripts') <script type="text/javascript"> $(function() { $('#pere-table').DataTable({ processing: false, serverSide: true, ordering: false, ajax:'http://127.0.0.1:8000/nouveau_ne/data_peres', columns :[ {data : 'nnid', name:'t_individus.nnid'}, {data : 'nom', name:'t_individus.nom'}, {data : 'postnom', name:'t_individus.postnom'}, {data : 'prenom', name:'t_individus.prenom'}, ] }); }); </script> @endpush 

4. The route

     Route::get('/nouveau_ne/data_peres', ['as' => 'nouveau_ne','uses' => 'AdulteController@recherchePere']); Route::get('/nouveau_ne/pere', [ 'uses' => 'AdulteController@index']); 

5. The Jquery Script for Clicking on a row to feed a text box

     <script type="text/javascript"> var vpWidth = $(window).width(); var vpHeight = $(window).height(); var textClickedOn; var pereNouv = $("#pere_nouv"); var nnid = $(".NNID"); nnid.click(function(){ //Get text clicked on textClickedOn = $(this).text(); //alert(textClickedOn); pereNouv.val(textClickedOn); }); </script> 

QUESTION: What am I doing wrong? Your help and tips will be highly appreciated

Answer 1

Click event is attachted to existing elements on page load. The key word here is existing . When we load something with ajax we manipulate DOM. We are placing totally new element.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time

try something like :

$('body').on('click', '#pere_nouv', function (event) {
    // your code goes here
});

or this :

$(document).on('click','body #pere_nouv',function(){
    // additional code
});