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文件。要导入的文件列表是：

jquery-ui-1.8.16.custom.css（版本可能会有所不同） - 此文件旁边应该有一个“images”文件夹
jquery-1.6.2.min.js（版本可能有所不同）
jquery-ui-1.8.16.custom.min.js（版本可能有所不同）

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

这应该有用，或者至少给你一个好的开始。如果需要更多，请告诉我。

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

1 个答案: