Question

我正在建立一个后台，我有一个带有下拉列表的图像库

选择器：

<section>
<label for="dropdown_gallery">Selecione a página que pretende carregar</label>
<div>                   
    <select name="dropdown_gallery" id="dropdown_gallery" onchange="loadXMLDoc(this.value)">
            <optgroup label="Páginas">
                <option value="">Selecione Página</option>
                <option value="empresa">Empresa</option>
                <option value="destaque">Empresa - Destaque</option>
                <option value="portfolio_design">Portfólio - Design Gráfico</option>
                <option value="portfolio_stands">Portfólio - Stands e Decorações</option>
                <option value="portfolio_publicidade">Portfólio - Publicidade Exterior</option>
                <option value="portfolio_promocoes">Portfólio - Promoções e Animações</option>
                <option value="portfolio_eventos">Portfólio - Eventos</option>
                <option value="portfolio_som">Portfólio - Som Ambiente</option>
            </optgroup>
        </select> 
    </select>
</div>
</section>
<ul class="gallery" id="image_gallery">
<?php
    $files = glob('images/*.{jpg,png,gif}', GLOB_BRACE);
        foreach($files as $file) {
            echo "<li>
                    <a href='".$file."' title='some Description'>
                        <img src='".$file."' width='116' height ='116' alt=''>
                    </a>
                </li>";
        }
?>
</ul>

第一次执行此操作时，它会很好地生成代码：

<li>
    <a rel="wl_gallery" href="images/3.jpg" title="some Description">
        <img src="images/3.jpg" alt="" height="116" width="116">
    <span><a class="edit">Edit</a><a class="delete">Delete</a></span></a>
</li>

但是如果我选择另一个选项，我会进行Ajax调用：

<script>
        function loadXMLDoc(page)
        {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("image_gallery").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","load_images.php?q="+page,true);
        xmlhttp.send();
        }
</script>

load_images.php与之前的代码相同，但生成的HTML代码不同：

<li>
    <a href="images/3.jpg" title="some Description">
        <img style="top: 0px;" src="images/3.jpg" alt="" height="116" width="116">
    </a>
</li>

我想这是因为第一次创建了页面，它调用了我在另一个文件中的JS函数（wl_Gallery.js）：

$.fn.wl_Gallery = function (method) {   
   ...   
}

在AJAX调用之后我有什么方法可以调用这个JS函数吗？

修改

我注意到的另一件事是在Firefox开发者工具中我有一点ev，第一次调用页面，但不是第二次这样：

enter image description here

Answer 1

如果我理解正确，请尝试编辑代码的这一部分

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
    document.getElementById("image_gallery").innerHTML=xmlhttp.responseText;
    // add this line
    $("#image_gallery").wl_Gallery({});
}

在Ajax调用之后调用javascript函数

1 个答案: