php - 在 ajax 调用的页面中创建弹出菜单

Question

我一直在尝试在由 ajax 函数调用的 php 页面中创建一个按钮，点击该按钮会弹出一个菜单，但我似乎无法弄清楚。 php页面通过名为postAll的ajax方法发布在名为cbox的div下:

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery-latest.js"></script>
<script type="text/javascript">
function toggleElement(id) 
{
    var element=document.getElementById(id);
    if(element.style.display=="block")
    {
        element.style.display="none";
    }
    else
    {
        element.style.display="block";
    }
}
function postAll()
{
    if(String(window.location).indexOf("?")==-1)
    {
        var location=window.location.href;
    }
    else
    {
        var location=window.location.href.substring(0,window.location.href.indexOf("?"));
        var clength=(window.location.href.length-1)-(window.location.href.indexOf("currentpage"))-11;
        var currentpage=window.location.href.substr(window.location.href.length-clength,clength);
    }
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("cbox").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","dynamic.php?location="+location+"&currentpage="+currentpage,true);
    xmlhttp.send();
}

$(document).ready(function()
{
    document.getElementById("option").addEventListener("click",function(){alert("Success");});
    postAll();
});
</script>

我尝试过使用 addEventListener 但我不确定我是否正确使用了它。我也尝试过使用以下代码，但它也不起作用:

$("#cbox").delegate("a","click", function() {
   toggleElement('option_toggle');
});
$("#cbox").on("click", "a", function() {
   toggleElement('option_toggle');
});

对于 .on 方法，我也遇到了未捕获的类型错误。这是我试图弹出菜单的实际按钮:

<div id="option"><p><a href="#"><img class="select" src="cog.png"></img></a></p></div>
<div id="option_toggle" style="display:none;"> Random Text </div>

任何帮助将不胜感激。

Answer 1

我在您的示例中看不到打开对话框的代码。不管怎样 - 我添加了一个非常小的例子。对于此代码，我下载 jquery-ui我按照 jquery dialog 的样本进行操作.

我什至添加了 Ajax，即使没有连接，并且我用 JQuery 编写了所有内容 - 作为对您收到的评论的回应。

这里是文件 #1 - 包含一个按钮，该按钮可调用 Ajax 来调用更多内容

<button onclick="loadAjaxContent()">Load ajax content</button>


<div id="ajaxContentContainer">

</div>


<script type="text/javascript">
    function loadAjaxContent()
    {
        $.ajax({
            url:'/Application/content',
            data:{param1:"value1"},
            success:function(result){$("#ajaxContentContainer").html(result)},
            error:function(result){$("#ajaxContentContainer").html(result.responseText)}

        })
    }
</script>

现在这是第 2 页 - 已插入到第一个页面中。此页面还有另一个可打开对话框的按钮。

<button onclick="openPopup()">open popup</button>


<div id="dialogContent">
    this is a dialog content
</div>
<script type="text/javascript">
    $("#dialogContent").dialog({autoOpen:false});
    function openPopup()
    {

       $("#dialogContent").dialog('open');
    }
</script>

请确保正确导入所有 js 和 css 文件。要导入的文件列表是:

1. jquery-ui-1.8.16.custom.css(版本可能有所不同) - 该文件旁边应该有一个“images”文件夹
2. jquery-1.6.2.min.js(版本可能有所不同)
3. jquery-ui-1.8.16.custom.min.js(版本可能有所不同)

您必须在“jquery”文件之后导入“jquery-ui”文件。顺序很重要。

这应该可行，或者至少给你一个良好的开端。如果需要更多，请告诉我。