jQuery Ajaxはhtmlデータをうまく読み込みますが、属性は「読めない」ようです。

Question

私が狂ってしまう前に助けてください。 さて、私は1週間コードに苦労していましたが、まだ動作していないことは分かりません。

アンカータグのdata-target属性を使用してモーダルを呼び出すことができます。私はそれが正常に動作している知っている。ここに私のPHPファイルがあります。これも問題ありません。

PHP（配置-load.php）

<?php 
include 'connection.php'; 
$sql = "SELECT * FROM tbl_personal"; 
$r = mysqli_query($con,$sql); 
$nr = mysqli_num_rows($r); 
if($nr > 0) { 
    while($dt = mysqli_fetch_array($r)){ 
     echo " 
      <tr> 
       <td>".$dt[0]."</td> 
       <td><a data-target='#modalShowDetails'>Edit</a></td> 
      </tr> 
     "; 
    } 
}else { 
    echo ""; 
} 
?> 

私は、このやった場合 2つのシナリオがあります。

<div class="table"> 
    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody id="placement-table"> 
      <?php include 'placement-load.php'; ?> 
     </tbody> 
    </table> 
</div> 

を私がクリックした場合、テーブル本体がうまくロードします編集（アンカータグ内）では、モーダルも読み込まれます。

BUT！

私はのtbodyタグに含めるを削除し、（jQueryのアヤックスを使用して）これをしなかった場合：

$(document).ready(function() { 
    autoRefresh(); 
}); 
function autoRefresh() { 
    $.ajax({ 
     method: 'POST', 
     url: "php/placement-load.php", 
     success: function(data) { 
      $('#placement-table').html(data); 
     } 
    }); 
} 

テーブル本体もうまくロードされますが、私は編集（アンカータグ内）をクリックすると、モーダルは機能しません。

なぜですか？

Answer 1

私はそれを持っていると思います。私は$.getScript("location of my script to open the modal here");を私のautoRefresh関数の$('#placement-table').html(data)のすぐ下に挿入しました。これについての考えは？

出典：https://api.jquery.com/jquery.getscript/

Answer 2

ajaxを介してデータを読み込んでいるときに、DOMに追加された新しいhtml要素ではまだ動作していないhtmlにバインドされている以前のjqueryがなぜ機能しないのでしょうか。

このような場合、すでにページで実行されているjQueryを再度実行して、新しく追加されたHTMLとバインドする必要があります。

私が取るアプローチは、単にbindという関数を作成して、それ以上は動作しないjQueryイベントをすべて追加し、ドキュメントのreadyイベントで呼び出して、その関数をあなたのajax呼び出しの完了時に呼び出します。参考のための次のスニペット：

function autoRefresh() { 
    $.ajax({ 
     method: 'POST', 
     url: "php/placement-load.php", 
     success: function(data) { 
      $('#placement-table').html(data); 
      bind(); //Calling bind function on ajax call success 
     } 
    }); 
} 

//Define bind function 
function bind(){ 
    //Add code to open the modal here 
    //You can add all the jquery code which is not executing after loading the data from ajax 
} 

//calling bind() along with your autoRefresh function 
$(document).ready(function() { 
    autoRefresh(); 
    bind(); 
});