.replacewith не работает, когда называется второй раз

Question

я следующая разметка:

<fieldset> 
    <legend>Headline Events...</legend> 

    <div style="width:100%; margin-top:10px;"> 
     <div style="width:100%; float:none;" class="clear-fix"> 
      <div style="width:400px; float:left; margin-bottom:8px;"> 
       <div style="width:150px; float:left; text-align:right; padding-top:7px;"> 
        &nbsp;Team Filter:&nbsp; 
       </div> 
       <div style="width:250px; float:left;"> 
        <input id="teamFilter" style="width: 100%" /> 
       </div> 
      </div> 
      <div style="width:400px; float:left; margin-bottom:8px;"> 
       <div style="width:150px; float:left; text-align:right; padding-top:7px;"> 
        &nbsp;Type Filter:&nbsp; 
       </div> 
       <div style="width:250px; float:left;"> 
        <input id="typeFilter" style="width: 100%" /> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="diaryTable" name="diaryTable" class="clear-fix"> 
     Getting latest Headlines... 
    </div> 
</fieldset> 

Я также следующие сценарии

<script> 

    function teamFilterChange(e) { 
     //alert(this.value()); 
     setCookie('c_team', this.value(), 90); 
     $c1 = getCookie('c_team'); 
     $c2 = getCookie('c_type'); 
     var param = "true|" + $c1 + "|" + $c2; 
     outputHLDiaryEntries(param); 
    } 

    function typeFilterChange(e) { 
     //alert(this.value()); 
     setCookie('c_type', this.value(), 90); 
     $c1 = getCookie('c_team'); 
     $c2 = getCookie('c_type'); 
     var param = "true|" + $c1 + "|" + $c2; 
     outputHLDiaryEntries(param); 
    } 

    // This optional function html-encodes messages for display in the page. 
    function htmlEncode(value) { 
     var encodedValue = $('<div />').text(value).html(); 
     return encodedValue; 
    } 

    function outputHLDiaryEntries(param) { 
     var url = "Home/DiaryEntries/"; 
     var data = "id=" + param; 
     $.post(url, data, function (json) { 
      var n = json.length; 
      alert(n + ' ' + json); 

      if(n == 0){ 
       //json is 0 length this happens when there were no errors and there were no results 
       $('#diaryTable').replaceWith("<span style='color:#e00;'><strong>Sorry: </strong> There are no headline events found. Check your filters.</span>"); 

      } else { 
       //json has a length so it may be results or an error message 
       //if jsom[0].dID is undefined then this mean that json contains the error message from an exception 
       if (typeof json[0].dID != 'undefined') { 
        //json[0].dDI has a value so we 
        //output the json formatted results 
        var out = ""; 
        var i; 
        var a = "N" //used to change the class for Normal and Alternate rows 

        for (i = 0; i < json.length; i++) { 

         out += '<div class="dOuter' + a + '">'; 
         out += '<div class="dInner">' + json[i].dDate + '</div>'; 
         out += '<div class="dInner">' + json[i].dRef + '</div>'; 
         out += '<div class="dInner">' + json[i].dTeam + '</div>'; 
         out += '<div class="dInner">' + json[i].dCreatedBy + '</div>'; 
         out += '<div class="dType ' + json[i].dType + '">' + json[i].dType + '</div>'; 
         out += '<div class="dServer">' + json[i].dServer + '</div>'; 
         out += '<div class="dComment">' + htmlEncode(json[i].dComment) + '</div></div>'; 

         //toggle for normal - alternate rows 
         if (a == "N") { 
          a = "A"; 
         } else { 
          a = "N"; 
         } 
        } 
        //output our formated data to the diaryTable div 
        $('#diaryTable').replaceWith(out); 

       } else { 
       //error so output json string 
         $('#diaryTable').replaceWith(json); 
       } 
      } 
     }, 'json'); 
    } 


    $(document).ready(function() { 

     //Set User Preferences 
     //First check cookies and if null or empty set to default values 
     var $c1 = getCookie('c_team'); 
     if ($c1 == "") { 
      //team cookie does not exists or has expired 
      setCookie('c_team', 'ALL', 90); 
      $c1 = "ALL"; 
     } 

     var $c2 = getCookie('c_type'); 
     if ($c2 == "") { 
      //type cookie does not exists or has expired 
      setCookie('c_type', "ALL", 90); 
      $c2 = "ALL"; 
     } 

     // create DropDownList from input HTML element 
     //teamFilter 
     $("#teamFilter").kendoDropDownList({ 
      dataTextField: "SupportTeamText", 
      dataValueField: "SupportTeamValue", 
      dataSource: { 
       transport: { 
        read: { 
         dataType: "json", 
         url: "Home/SupportTeams?i=1", 
        } 
       } 
      } 
     }); 
     var teamFilter = $("#teamFilter").data("kendoDropDownList"); 
     teamFilter.bind("change", teamFilterChange); 
     teamFilter.value($c1); 

     //typeFilter 
     $("#typeFilter").kendoDropDownList({ 
      dataTextField: "dTypeText", 
      dataValueField: "dTypeValue", 
      dataSource: { 
       transport: { 
        read: { 
         dataType: "json", 
         url: "Home/DiaryTypes?i=1", 
        } 
       } 
      } 
     }); 
     var typeFilter = $("#typeFilter").data("kendoDropDownList"); 
     typeFilter.bind("change", typeFilterChange); 
     typeFilter.value($c2); 

     // Save the reference to the SignalR hub 
     var dHub = $.connection.DiaryHub; 

     // Invoke the function to be called back from the server 
     // when changes are detected 
     // Create a function that the hub can call back to display new diary HiLights. 
     dHub.client.addNewDiaryHiLiteToPage = function (name, message) { 
      // Add the message to the page. 
      $('#discussion').append('<li><strong>' + htmlEncode(name) 
       + '</strong>: ' + htmlEncode(message) + '</li>'); 
     }; 

     // Start the SignalR client-side listener 
     $.connection.hub.start().done(function() { 
      // Do here any initialization work you may need 
      var param = "true|" + $c1 + "|" + $c2; 
      outputHLDiaryEntries(param) 
     }); 

    }); 
</script> 

На начальной странице загрузки функции outputHLDiaryEntries вызывается, когда signalR хаб запускается. Если я затем изменю любой из dropdownlists, это вызовет outputHLDiaryEntries, но $ ('# diaryTable'). ReplaceWith(); не работает. Если я обновляю страницу, отображаются правильные данные.

ОБНОВЛЕНИЕ!

На основе замечаний A.Wolff, я исправил проблему, обернув содержание мне нужно с тем же элементом я заменяющий ..., добавив следующую строку в начале функции outputHLDiartEntries ...

var outStart = '<div id="diaryTable" name="diaryTable" class="clear-fix">'; 
var outEnd = '</div>'; 

, а затем сменить каждый из заменителей так, чтобы они включали обертки, например

$('#diaryTable').replaceWith(outStart + out + outEnd); 

Answer 1

replaceWith() заменяет сам элемент, так, то на любом следующем вызове $('#diaryTable') вернет пустой соответствующий комплект.

Вам лучше всего вместо этого заменить содержимое элемента, например:

$('#diaryTable').html("<span>New content</span>");