Javascript 每个循环-每次迭代都会写入新的对话框内容div-如何销毁每个循环上的旧div？_Javascript_Jquery_Html_Css_Ajax

Javascript 每个循环-每次迭代都会写入新的对话框内容div-如何销毁每个循环上的旧div？

javascript jquery html css ajax

Javascript 每个循环-每次迭代都会写入新的对话框内容div-如何销毁每个循环上的旧div？,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我有一个使用ajax GET下载xml文件的网页，然后一个函数（xmlParser）在.each循环中解析xml文件。在同一个循环中，我创建jQuery对话框上面提到的ajaxget每1秒重新运行一次，因为它获取的xml文件是动态的。页面上的所有内容都正常工作（即所有内容显示和功能正常），但当我在Chrome的开发人员控制台中查看页面元素时，我注意到对话框内容的div在每次ajax函数循环时都被重新创建，这最终导致页面崩溃我怎样才能防止这种情况？我似乎无法找到一种方法来正确覆盖这些div，以

我有一个使用ajax GET下载xml文件的网页，然后一个函数（xmlParser）在.each循环中解析xml文件。在同一个循环中，我创建jQuery对话框

上面提到的ajaxget每1秒重新运行一次，因为它获取的xml文件是动态的。页面上的所有内容都正常工作（即所有内容显示和功能正常），但当我在Chrome的开发人员控制台中查看页面元素时，我注意到对话框内容的div在每次ajax函数循环时都被重新创建，这最终导致页面崩溃

我怎样才能防止这种情况？我似乎无法找到一种方法来正确覆盖这些div，以阻止每次创建新div

我真的很感激有人的帮助

完整代码如下：

<!DOCTYPE html>
<!--[if IE 8]>
<html class="ie ie8">
  <![endif]-->
  <!--[if IE 9]>
  <html class="ie ie9">
    <![endif]-->
    <!--[if gt IE 9]>
    <!-->
    <html>
      <!--<![endif]-->
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <link rel='stylesheet' id='jquery-ui-theme-css'  href='css1.css' type='text/css' media='all' />
      <link rel='stylesheet' id='googlefonts-css'  href='css2.css' type='text/css' media='all' />
      <link rel='stylesheet' id='bootstrap-css'  href='css3.css' />
      <link rel='stylesheet' id='fontawesome-css'  href='css4.css' type='text/css' media='all' />
      <link rel='stylesheet' id='main-css'  href='css5.css' media='all' />
      <link rel='stylesheet' id='red-css'  href='css6.css' type='text/css' media='all' />
      <link rel='stylesheet' id='responsive-css'  href='css7.css' type='text/css' media='all' />
      <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
      <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
$(document).ready(function () {
setInterval("ajaxd()", 1000);
});
function ajaxd() {
    "use strict";
    $.ajax({
        type: "GET",
        url: "output.xml",
        dataType: "xml",
        cache: false,
        success: xmlParser
    });
};
function xmlParser(xml) {
    "use strict";
    $(".main2").empty();
    //$(".main").html(''); //blank out appended info on each load

    $('#load').hide();
    var count = 1;
    $(xml).find("proc").each(function () {
        var ip = $(this).find("ip").text();
        var hdBlackGain = $(this).find("hdBlackGain").text();
        var hdLumaGain = $(this).find("hdLumaGain").text();
        var hdChromaGain = $(this).find("hdChromaGain").text();
        var hdHue = $(this).find("hdHue").text();
        var machineName = $(this).find("machineName").text();

        if (hdBlackGain === '0' && hdLumaGain === '0' && hdChromaGain === '0' && hdHue === '0') {
        } else {
            $(".main2").append('<div class="proc"><div class="title"><div class="dialog_but">' + machineName + '</div><div class="dialog_content"><ul><li>Black Gain: ' + hdBlackGain + '</li><li>Luma Gain: ' + hdLumaGain + '</li><li>Chroma Gain: ' + hdChromaGain + '</li><li>Hue: ' + hdHue + '</li><li>IP Address: ' + ip + '</li></ul></div></div></div>');
            $(".proc").show();

        //loop through every button anchor element
        $('.dialog_but').each(function() {

            //create a local scope of a dialog variable to attach
            var $dialog;

            //create the dialog for the div.dialog_content standing next to the anchor element
            //we make the autoOpen false so that it can be reusable
            //also we set the modal = true to appear the dialog as a modal prompt
            $dialog = $(this).next('div.dialog_content').dialog({
              modal: true,
              autoOpen: false,
              width: 600,
              title: 'Current Proc Status: ' + machineName,
              buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
            });

            //now attach the open even of the dialog to the anchor element
            $(this).click(function(e) {
                //prevent the anchor element to go to the hyperlinked page
                e.preventDefault();

                //open the dialog
                $dialog.dialog('open');
            });
        });
            count = count + 1;
        }
    });
};
</script>
<style> 
.main2{
width:1150px;
margin:0 auto;
height:130px;
}

.proc{
width:208px;
float:left;
margin:10px;
border:1px #dedede solid;
padding:5px;
display:none;
background-color:#A0492E;
}

.title{
text-align:center;
color:#ffffff;
}
</style>
</head>
<body class="boxed home-3">
      <div class="wrap">
        <!-- Header Start -->
        <header id="header">
          <!-- Main Header Start -->
          <div class="main-header">
            <div class="container">
              <!-- TopNav Start -->
              <div class="topnav navbar-header">
                <a class="navbar-toggle down-button" data-toggle="collapse" data-target=".slidedown"> <i class="fa fa-angle-down icon-current"></i>
                </a>
              </div>
              <!-- TopNav End -->
              <!-- Logo Start -->
              <div class="logo pull-left">
                <h1>
                  <a href="http://bcceng">
                    <img src="http://bcceng/wp-content/themes/opseng/img/logo.png" alt="Text goes here" width="222" height="32" style="vertical-align: baseline !important;"></a>
                </h1>
              </div>
              <!-- Logo End --> </div>
          </div></header>
          <!-- Main Header End -->
          <!-- Content Start -->
          <div id="main">
            <!-- Slogan Start-->
            <div class="slogan bottom-pad-small">
              <div class="container">
                <div class="row">
                  <div class="slogan-content">
                    <div class="col-lg-12 col-md-12">
                      <h2 class="slogan-title">Text goes here</h2>
                    </div>
                    <div class="clearfix"></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Slogan End-->
            <!-- Main Content start-->
            <div class="main-content">
              <div class="container">
                <div class="row">
                  <div align="center">Text goes here</div>
                </div>
              </div>
              <div class="row">
                <div class="main2">
                  <div align="center" class="loader">
                    <img src="loader.gif" id="load" alt="Please wait..." width="16" height="11" align="absmiddle"/>
                  </div>
                </div>
                <div class="clear"></div>
              </div>
              <div class="row">
                <p>
                  <br>
                  <br></p>
              </div>
            </div>
          </div>
          <div class="footer-top">
            <div class="container">
              <div class="row">
                <ul>
                <li>
                  <p>Last updated: 3/4/15 11:34pm</p>
                </li>            
              </ul>
              </div>
            </div>
          </div>
          <!-- Main Content end--> </div>
        <!-- Content End -->
        <!-- Footer Start -->
        <footer id="footer"></footer>
      <!-- Wrap End -->
</body>
    </html>


页面标题
$（文档）.ready（函数（）{
setInterval（“ajaxd（）”，1000）；
});
函数ajaxd（）{
“严格使用”；
$.ajax({
键入：“获取”，
url:“output.xml”，
数据类型：“xml”，
cache:false，
成功：xmlParser
});
};
函数xmlParser（xml）{
“严格使用”；
$（“.main2”）.empty（）；
//$（“.main”）.html（“”）；//在每次加载时将附加的信息清空
$（'#load'）.hide（）；
var计数=1；
$（xml）.find（“proc”）.each（函数（）{
var ip=$（this.find（“ip”）.text（）；
var hdBlackGain=$（this.find（“hdBlackGain”）.text（）；
var hdLumaGain=$（this.find（“hdLumaGain”）.text（）；
var hdchromeather=$（this）.find（“hdchromeathere”）.text（）；
var hdHue=$（this.find（“hdHue”）.text（）；
var machineName=$（this.find（“machineName”）.text（）；
如果（hdBlackGain==='0'和&hdLumaGain=='0'和&hdchromeach=='0'和&hdHue=='0'）{
}否则{
$（“.main2”）.append（“+machineName+”黑色增益：“+hdBlackGain+”亮度增益：“+hdLumaGain+”
色度增益：“+hdchrome+”色调：“+hdHue+”IP地址：“+IP+”）；
$（“.proc”）.show（）；
//循环通过每个按钮锚元素
$（'.dialog_but'）。每个（函数（）{
//创建要附加的对话框变量的局部范围
var$对话框；
//为锚元素旁边的div.dialog\u内容创建对话框
//我们将autoOpen设为false，以便它可以重用
//此外，我们还将modal=true设置为将对话框显示为模态提示
$dialog=$（this）.next（'div.dialog\u content'）。dialog({
莫代尔：是的，
自动打开：错误，
宽度：600，
标题：“当前进程状态：”+machineName，
按钮：[
{
文字：“OK”，
单击：函数（）{
$（此）.dialog（“关闭”）；
}
}
]
});
//现在将对话框的打开部分附着到锚元素
$（此）。单击（函数（e）{
//阻止锚元素转到超链接页面
e、 预防默认值（）；
//打开对话框
$dialog.dialog（'open'）；
});
});
计数=计数+1；
}
});
};
.main 2{
宽度：1150px；
保证金：0自动；
高度：130像素；
}
.proc{
宽度：208px；
浮动：左；
利润率：10px；
边框：1px#dedede实心；
填充物：5px；
显示：无；
背景色：#A0492E；
}
.头衔{
文本对齐：居中；
颜色：#ffffff；
}
这里有文字
这里有文字







最后更新：3/4/15 11:34下午

创建对话框对象时，添加到主体中的元素不在容器

main2

下，因此调用

$（“.main2”）。empty（）

不会删除它们

在您的情况下，由于对话框是为元素

dialog\u content

创建的，因此可以调用of来删除它们

$('.dialog_content').dialog('destroy');
$(".main2").empty();

另一个选项是使用单个对话框，如

将下面的html添加到您的身体中

<div class="dialog_content">
    <ul>
        <li>Black Gain: <span class="hd-black-gain"></span></li>
        <li>Luma Gain: <span class="hd-luma-gain"></span></li>
        <li>Chroma Gain: <span class="hd-chroma-gain"></span></li>
        <li>Hue: <span class="hd-hue"></span></li>
        <li>IP Address: <span class="ip"></span></li>
    </ul>
</div>



黑增益：
亮度增益：
色度增益：
色调：
IP地址：

然后

$（文档）.ready（函数（）{
setInterval（“ajaxd（）”，1000）；
变量$dialog=$（'.dialog_content'）。dialog({
莫代尔：是的，
自动打开：错误，
宽度：600，
标题：“当前进程状态：”，
按钮：[{
文字：“OK”，
单击：函数（）{
$（此）.dialog（“关闭”）；
}
}]
});
$（'.main2'）。在（'click'，'dialog_but'，函数（e）{
变量$this=$（this），
data=$this.data（）；
e、 预防默认值（）；
$dialog.dialog（'option'，'title'，'Current
$(document).ready(function () {
    setInterval("ajaxd()", 1000);

    var $dialog = $('.dialog_content').dialog({
        modal: true,
        autoOpen: false,
        width: 600,
        title: 'Current Proc Status: ',
        buttons: [{
            text: "OK",
            click: function () {
                $(this).dialog("close");
            }
        }]
    });

    $('.main2').on('click', '.dialog_but', function (e) {
        var $this = $(this),
            data = $this.data();
        e.preventDefault();

        $dialog.dialog('option', 'title', 'Current Proc Status: ' + data.machineName);
        $dialog.find('.hd-black-gain').text(data.hdBlackGain);
        $dialog.find('.hd-luma-gain').text(data.hdLumaGain);
        $dialog.find('.hd-chroma-gain').text(data.hdChromaGain);
        $dialog.find('.hd-hue').text(data.hdHue);
        $dialog.find('.ip').text(data.ip);

        //open the dialog
        $dialog.dialog('open');
    })
});

function ajaxd() {
    "use strict";
    $.ajax({
        type: "GET",
        url: "output.xml",
        dataType: "xml",
        cache: false,
        success: xmlParser
    });
};

function xmlParser(xml) {
    "use strict";
    $(".main2").empty();
    //$(".main").html(''); //blank out appended info on each load

    $('#load').hide();
    var count = 1;
    $(xml).find("proc").each(function () {
        var ip = $(this).find("ip").text();
        var hdBlackGain = $(this).find("hdBlackGain").text();
        var hdLumaGain = $(this).find("hdLumaGain").text();
        var hdChromaGain = $(this).find("hdChromaGain").text();
        var hdHue = $(this).find("hdHue").text();
        var machineName = $(this).find("machineName").text();

        if (hdBlackGain === '0' && hdLumaGain === '0' && hdChromaGain === '0' && hdHue === '0') {} else {
            var $proc = $('<div class="proc"><div class="title"><div class="dialog_but">' + machineName + '</div></div></div>').appendTo(".main2");
            $proc.find('.dialog_but').data({
                machineName: machineName,
                hdBlackGain: hdBlackGain,
                hdLumaGain: hdLumaGain,
                hdChromaGain: hdChromaGain,
                hdHue: hdHue,
                ip: ip
            })

            count = count + 1;
        }
    });
};

<div id="dialog">

$('#dialog').dialog({ /* your options*/});

<div class="dialog_but" title="Current Proc Status: ' + machineName+'">

$(document).on('click','.dialog_but',function(){
     var title = this.title,
         content = $(this).next('div.dialog_content').html();
     $('#dialog').html(content).dialog('option','title', title).dialog('open');
});

.proc .dialog_content{display:none}