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

Question

我在Laravel 5.4中有一个Web应用程序。 在某些模块中，我有一个主要形式，可以在模态对话框窗口中从中调用数据表（例如： 如果单击搜索按钮，则将在模态窗口中显示数据表 ）。 我想要实现的是，当我单击数据表中的数据时，它会关闭模式窗口并获取单击的信息，并将其显示在表单（主表单）的指定字段中。 但是，在我放置了所有必需的脚本之后，单击数据表中的数据就没有任何反应。

1. 一种。 HTML表格

     <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。用于接收数据的输入字段以pere_nouv作为其ID

2. 控制器获取数据

     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. 数据表的ajax

     @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. 路线

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

5. 单击行以馈送文本框的Jquery脚本

     <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> 

问题：我在做什么错？ 您的帮助和提示将不胜感激

Answer 1

点击事件会附加到页面加载时的现有元素上。 这里的关键词是存在的 。 当我们用ajax加载某些东西时，我们会操纵DOM。 我们正在放置全新的元素。

委派事件的优势在于，它们可以处理以后在文档中添加的后代元素中的事件

尝试类似的东西：

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

或这个 ：

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