为什么我的div在一些AJAX调用后会消失?

时间:2014-11-05 17:01:54

标签: javascript jquery ajax

我有问题我现在患了4天了。我正在制作电影注册网页。我做了一个较小的测试项目来重建我得到的错误。

divpingpong.php:我有3个div(A,B和C),还有一个铅笔按钮。我首先在 #placeholder div中包含div B中的上传器(当页面加载时)。我想多次使用 #placeholder 。例如,如果用户切换到div B,我想用javascript显示上传器。我使用jQuery .appendTo 函数将 #placeholder 移动到我想要的位置,然后 .show()。 Div A不需要上传者。当用户点击铅笔图标时,我想显示带有AJAX加载内容的div C并将上传器移入其中。在切换回div B时,我希望 #placeholder 移回div B.

div_ccontent.php:这是一个文件,由AJAX调用并具有div C的内容。它还包含某种JS代码,这有助于(或至少有意)将上传者移动到正确的位置。

问题:经过几次(超过1次)AJAX调用后,我的整个 #placeholder div似乎完全消失了。它不能消失,因为我想用它来上传数据输入(由div B表示)和数据操作(由div C表示)的图片。我知道它不是最好的编程方法,但我不擅长编写好的代码。此程序仅供家庭使用。

我的研究:我尝试了所有可能的解决方案和每个相关的谷歌搜索术语(包括Stackoverflow),但没有成功。我在technify.me找到了一个有用的链接,关于使用 eval()函数来运行JS来自AJAX请求,但它也没有帮助我。我正在尝试可能的灵魂并一起搜索大约7-8个小时,这非常令人讨厌。

这是我的代码:
divpingpong.php:

<?php
    @session_start();
    include_once("initial.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Div ping-pong</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script language="javascript" src="easytooltip/js/easyTooltip.js"></script>
    <script language="javascript" src="jsfv.js"></script>
    <script language="javascript">
        $(document).ready(function(){
            var ajaxfile="div_ccontent.php";

            function switchpage(){
                //$("#div_a").toggle(0);    //if we want to make sure the display is the opposite (show->hide, hide->show)
                var val=$(this).val();
                $("#div_"+val).show();
                if(val=="a")
                    $("#div_b, #div_c").hide();
                else if(val=="b"){
                    $("#div_a, #div_c").hide();
                    var parentid=$("#placeholder").parent().attr("id");
                    var exists=$("#placeholder").length;
                    if(parentid!="div_b"){
                        $("#placeholder").appendTo($("#div_b")).show();
                        //$("#upload_frame").attr("src", "").hide();
                    }
                }
            }

            function domod(){
                $("#div_a").hide();
                $("#div_b").hide();
                $("#div_c").show();
                $.post(ajaxfile, {sid: Math.random}, function(valasz){
                    $("#div_c").html(valasz);
                    $("#div_c").find("script").each(function(i){
                        eval($(this).text());
                    });
                });
            }

            $("#div_b").hide();
            $("#div_c").hide();
            $("#selectpanel").change(switchpage);
            $("img.pencil").live("click",domod);
        });
    </script>
    <style type="text/css">
        img.pencil:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h3>Div ping-pong, that is replace a div with AJAX calls</h3>
    <select id="selectpanel">
        <option value="a">Div A</option>
        <option value="b">Div B</option>
    </select>
    <div id="div_a">
        <b>Div A</b>
        <p>
            This is the place for quick search. There is some amount of text in a table with a few rows, which is in a fieldset.<br />
            This will never contain the certain #placeholder div.
        </p>
    </div>
    <div id="div_b">
        <b>Div B</b>
        <p>
            This is the place for data input. There is some amount of text in a table with a few rows, which is in a fieldset.<br />
            Then, comes the uploader in #placeholder:
            <div id="placeholder"><?php include_once("upload.php"); ?></div>
        </p>
    </div>
    <div id="div_c">
    </div>
    Modify <img class="pencil" src="img/modositas.png" alt="módosítás" />
</body>
</html>

div_ccontent.php:

<?php
    session_start();
    $included=strtolower(realpath(__FILE__))!=strtolower(realpath($_SERVER["SCRIPT_FILENAME"]));
    if(!$included && !isset($_POST["sid"])) header("Content-type: text/html; charset=utf-8");
    if(isset($_POST["sid"])) include_once("initial.php");
?>
<b>Div C</b>
<p>
    This is the place for data manipulation. There is a little amount of text in a table with a few rows, which is in a fieldset.<br />
   Then, comes the uploader in #placeholder:
</p>
<p id="additionalinfo">Does the #placeholder exist? (1-yes, 0-no) </p>
<script language="javascript">
    var parentid=$("#placeholder").parent().attr("id");
    var exists=$("#placeholder").length;
    if(parentid!="div_c"){
        $("#placeholder").appendTo($("#div_c")).show();
        //$("#upload_frame").attr("src", "").hide();
    }
    $("#additionalinfo").append(exists);
</script>

我无法弄清楚,可能是什么问题。为什么那个div消失了?如果可以,请回答。任何帮助将不胜感激。

0 个答案:

没有答案