Question

我有一个名为test.html的页面，其中一个名为id=display_modal_result的div（用于显示模态的内容）和另一个名为id=item的div（用于显示每个模态的链接）。

在另一个页面（modalcall.php）中我有PHP脚本，它生成多个模态链接和多个模态内容。

在test.html上，我使用AJAX脚本调用我的PHP页面，并在#item和#display_modal_result中添加结果。但是当我尝试点击一个链接时，关联模式不会打开。

一个想法？

test.html上的Ajax脚本：

    $.ajax({
        type: "GET",
        url: "modalcall.php",
        success: function(data) {

          $('#item').html(data); // Add modal links
          $('#display_modal_result').html(data); // Add content modal
          $('#display_modal_result').on('click', '.item_link', function(){

          // Get ID of MODAL
          var targetmodal = $(this).attr('data-target');
          // Show modal 
          $(targetmodal).modal('show');
        });

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("error");
        }
    });

test.html上的Html：

<div id="display_modal_menu">
<!-- Display X content modal from modalcall.php -->
</div>

<div id="item">
<!-- Display X modal link from modalcall.php -->
</div>

modalcall.php上的脚本：

// While to display X modal link
$result1 = mysql_query("select * from $mytable order by iditem");
while ($r1 = mysql_fetch_array($result1)) 
{
 $iditem= $r1['iditem'];
 $title= $r1['title'];

 echo '<div class="item_link">
       <div class="item_link_line" data-toggle="modal" data-target="#mymodal_'.$iditem.'" type="button">'.$title.'</div></div>';
}


// While to display each modal content
$result1 = mysql_query("select * from $mytable order by iditem");
while ($r1 = mysql_fetch_array($result1)) 
{
 $iditem= $r1['iditem'];
 $title= $r1['title'];
 $content= $r1['content'];
 echo '<div class="modal fade" id="#mymodal_'.$iditem.'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="menumodal-container table-responsive">'.$title.'<br>'.$content.'<BR><BR>';
 echo '</div></div></div>';
}

在AJAX调用之后打开Boostrap动态模态

0 个答案: