Переход между блоками теряет элементы

Question

Я перехожу между блоками в blockUI, но после разблокирования он полностью удаляет элементы первого элемента из DOM, есть ли способ обойти это?

$(function() { 
 
    $("#step1").click(function() { 
 
     $.blockUI({ message: $("#test1") }); 
 
    }); 
 
    
 
\t $("#step2").click(function() { 
 
     $.unblockUI(); 
 
     $.blockUI({ message: $("#test2") }); 
 
    }); 
 
    
 
\t $("#step3").click(function() { 
 
     $.unblockUI(); 
 
    }); 
 
    
 
\t $("#step4").click(function() { 
 
     if ($("#test1").length > 0) 
 
      $.blockUI({ message: "test 1 still exists in DOM" }); 
 
     else 
 
      $.blockUI({ message: "cannot find test 1 in DOM" }); 
 
    });  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.66.0-2013.10.09/jquery.blockUI.min.js"></script> 
 
<input type="button" id="step1" value="1. Show first block" /> 
 
<div id="test1">test 1<br /> 
 
    <input type="button" id="step2" value="2. Switch to second block" /></div> 
 
<div id="test2">test 2<br /> 
 
    <input type="button" id="step3" value="3. Hide all blocks" /></div> 
 
<input type="button" id="step4" value="4. See if test1 exists" />

Answer 1

Я обнаружил, что проблема была связана с гаснуть, не стесняйтесь, чтобы удалить вопрос, если вам нравится.

$(function() { 
 
    $("#step1").click(function() { 
 
     $.blockUI({ message: $("#test1") }); 
 
    }); 
 
    
 
\t $("#step2").click(function() { 
 
     $.unblockUI({ fadeOut: 0}); 
 
     $.blockUI({ message: $("#test2") }); 
 
    }); 
 
    
 
\t $("#step3").click(function() { 
 
     $.unblockUI(); 
 
    }); 
 
    
 
\t $("#step4").click(function() { 
 
     if ($("#test1").length > 0) 
 
      $.blockUI({ message: "test 1 still exists in DOM" }); 
 
     else 
 
      $.blockUI({ message: "cannot find test 1 in DOM" }); 
 
    });  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.66.0-2013.10.09/jquery.blockUI.min.js"></script> 
 
<input type="button" id="step1" value="1. Show first block" /> 
 
<div id="test1">test 1<br /> 
 
    <input type="button" id="step2" value="2. Switch to second block" /></div> 
 
<div id="test2">test 2<br /> 
 
    <input type="button" id="step3" value="3. Hide all blocks" /></div> 
 
<input type="button" id="step4" value="4. See if test1 exists" />