モーダルはAjaxで動作しません

Question

モーダルは開いていません。モーダルはAjaxなしでインポートしてもモーダルは問題なく開きますが、どうすれば修正できますか？

このコードを使用すると、クリックで読み込まれますが、別のクリックでのみ開くようになります。どのようにして、そのモードを開くには1回クリックするだけですか？

ここではモーダルコード（問題）：

jQuery(function ($) { 

    $('#basic-modal a').click(function (e) { 
     $('#basic-modal-content' + this.id).modal({ 
      overlayClose: true 
     }); 
     return false; 
    }); 

    // Load dialog on page load 
    //$('#basic-modal-content').modal(); 

    // Load dialog on click 
    $(document).on('click','#basic-modal', function(){ 
    $('#basic-modal a').click(function (e) { 
     $('#basic-modal-content' + this.id).modal({ 
      overlayClose:true 
     }); 
     return false; 
    }); 

    }); 
}); 

モーダルHTML（これが機能している）：

<div id="basic-modal"> 
     <a target="_blank" class="textprio2" id="368774" class="basic"> Text 
<span class="fa fa-info"</span></a><br>   
     </div> 

     <!-- modal content --> 
     <div id=modal-desing > 
     <div id="basic-modal-content368774"> Here is the Content 
</div></div> 

を（データベースからロード）（Ajaxは問題ではありません） Ajax：

include("config.inc.php"); //include config file 
//sanitize post value 
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); 

//throw HTTP error if page number is not valid 
if(!is_numeric($page_number)){ 
    header('HTTP/1.1 500 Invalid page number!'); 
    exit(); 
} 

//get current starting point of records 
$position = (($page_number-1) * $item_per_page); 

//fetch records using page position and item per page. 
$results = $mysqli->prepare("SELECT modal FROM animegesamtliste ORDER BY id DESC LIMIT ?,?"); 
$i1 = 1; 
//bind parameters for markers, where (s = string, i = integer, d = double, b = blob) 
//for more info https://www.sanwebe.com/2013/03/basic-php-mysqli-usage 
$results->bind_param("dd", $position, $item_per_page); 
$results->execute(); //Execute prepared Query 
$results->bind_result($modal); //bind variables to prepared statement 

//output results from database 
while($results->fetch()){ 

echo $modal; 
} 

?> 
<script src='_include/js/jquery.simplemodal.js'></script> 

サイト：

<ul id="results"><!-- results appear here --></ul> 

    <div align="center"> 
     <button id="load_more_button"><img src="ajax-loader.gif" class="animation_image" style="float:left;"> Load More</button> <!-- load button --> 
    </div> 
</div> 

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> 
<script type="text/javascript"> 
var track_page = 1; //track user click as page number, righ now page number 1 
load_contents(track_page); //load content 

$("#load_more_button").click(function (e) { //user clicks on button 
    track_page++; //page number increment everytime user clicks load button 
    load_contents(track_page); //load content 
}); 

//Ajax load function 
function load_contents(track_page){ 
    $('.animation_image').show(); //show loading image 

    $.post('fetch_pages.php', {'page': track_page}, function(data){ 

     if(data.trim().length == 0){ 
      //display text and disable load button if nothing to load 
      $("#load_more_button").text("You have reached end of the record!").prop("disabled", true); 
     } 

     $("#results").append(data); //append data into #results element 

     //scroll page to button element 
     $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 800); 

     //hide loading image 
     $('.animation_image').hide(); //hide loading image once data is received 
    }); 

Answer 1

私はそれを固定し得る：

が