.each循环内的jQuery .dialog-每次迭代都编写新的对话框内容div-如何在每个循环上销毁旧的div？

Question

I have a webpage that is using ajax GET to download an xml file, then a function (xmlParser) parses the xml file in an .each loop. 我有一个网页正在使用ajax GET下载xml文件，然后一个函数（xmlParser）在.each循环中解析该xml文件。 Inside the same .each loop, I am creating jQuery dialog boxes. 在同一个.each循环中，我正在创建jQuery对话框。

The ajax GET mentioned above re-runs every 1 second because the xml file it is getting is dynamic. 上面提到的ajax GET每1秒重新运行一次，因为它获取的xml文件是动态的。 Everything on the page works correctly (ie all content displays and functions properly), but when I look at the page Elements in Chrome's developer console, I noticed that the divs for the dialog content are being recreated everytime the ajax function loops, which eventually causes the page to crash. 页面上的所有内容均正常运行（即所有内容均显示并正常运行），但是当我在Chrome开发者控制台中查看“元素”页面时，我注意到每次ajax函数循环时都会重新创建对话框内容的div，这最终导致页面崩溃。

How can I prevent this? 我该如何预防？ I can't seem to figure out a way to properly overwrite these divs to stop new ones from being created each time. 我似乎无法找到一种方法来正确覆盖这些div，以防止每次创建新的div。

I would really appreciate someone's help. 我真的很感谢某人的帮助。

The full code is below: 完整的代码如下：

<!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>

Answer 1

When you create dialog objects, there are elements which are added to the body which are not under the container main2 , so calling $(".main2").empty() will not remove them. 创建对话框对象时，有一些添加到正文中的元素不在容器main2 ，因此调用$(".main2").empty()不会删除它们。

In your case since the dialogs are created for elements dialog_content you can call the destroy method of dialog to remove them 在您的情况下，由于对话框是为元素dialog_content创建的， dialog_content可以调用dialog的destroy方法将其删除

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

Another option is to use a single dialog like 另一个选择是使用单个对话框，例如

Add below html to your body 在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>

then 然后

$(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;
        }
    });
};

Answer 2

Since your html has such a short life span to me it makes sense not to add the extra overhead of creating a bunch of dialogs and event handlers that individually have a very low likelihood of being used. 由于您的html对我来说寿命很短，因此不增加创建一堆单独使用的对话框和事件处理程序的额外开销是有意义的。

Recycling one dialog is very easy 回收一个对话框非常简单

You could put a title attribute on the element that is being clicked, and extract the html on demand. 您可以将title属性放在要单击的元素上，然后按需提取html。

Add a permanent dialog to the page: 在页面上添加一个永久对话框：

<div id="dialog">

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

Modify your html strings in the xml parsing code: 在xml解析代码中修改您的html字符串：

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

Then for your click handler you can put this in your page load code and remove it from the xml parser 然后，对于点击处理程序，您可以将其放入页面加载代码中，并将其从xml解析器中删除

$(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');
});

One added step would be to add a css rule to hide .proc .dialog_content 增加的一个步骤是添加一个CSS规则来隐藏.proc .dialog_content

CSS 的CSS

.proc .dialog_content{display:none}

.each循环内的jQuery .dialog-每次迭代都编写新的对话框内容div-如何在每个循环上销毁旧的div？

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-03-06 03:23:24

解决方案2
1 2015-03-06 03:48:33

.each循环内的jQuery .dialog-每次迭代都编写新的对话框内容div-如何在每个循环上销毁旧的div？

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-03-06 03:23:24

解决方案2 1 2015-03-06 03:48:33

解决方案1
1 已采纳 2015-03-06 03:23:24

解决方案2
1 2015-03-06 03:48:33