2014-10-22 106 views
0

我試圖清除模糊上類「新」的所有輸入,但由於某種原因,它只是不起作用。我現在已經三個小時對這個問題感到慚愧,我忽略了哪一點?下面的相關代碼。清除模糊上的輸入字段

UPDATE 2

我試圖改變了的switch-case塊與對應如果塊,並且它們得到預期的結果。這消除了當前的問題,但我不認爲它是原始問題的可行答案,這就是爲什麼我的origianl代碼與switch-case不起作用。

更新1

經過一番研究和試驗,我發現我可以清除與類所有輸入「新」,只要他們不是我的switch-case塊中。我正在測試的選擇器是$('。new'),一旦進入switch-case模塊,就不會有明顯的效果。

@{ 
    ViewBag.Title = "Viser infrastruktur"; 
    Layout = "~/Views/Shared/_SuperOfficeLayout.cshtml"; 
} 

<table class="table table-striped compact hover row-border"> 
    <thead> 
     <tr> 
      <th>Produsent</th> 
      <th>Modell</th> 
      <th>Serienummer</th> 
      <th>Firmware</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <div class="control-group"> 
        <input type="text" class="col-md-12 form-control autosave new" name="manufacturer" placeholder="Produsent" value="" /> 
        <input type="hidden" class="autosave new" name="id" value="" /> 
        <input type="hidden" class="autosave new" name="superOfficeCustomerId" value="@Model.SuperOfficeCustomerId" /> 
       </div> 
      </td> 
      <td> 
       <div class="control-group"> 
        <input type="text" class="col-md-12 form-control autosave new" name="model" placeholder="Modell" /> 
       </div> 
      </td> 
      <td> 
       <div class="control-group"> 
        <input type="text" class="col-md-12 form-control autosave new" name="serialNumber" placeholder="Serienummer" /> 
       </div> 
      </td> 
      <td> 
       <div class="control-group"> 
        <input type="text" class="col-md-12 form-control autosave new" name="firmware" placeholder="Firmware" /> 
       </div> 
      </td> 
     </tr> 
     @foreach (var infrastructure in Model.Infrastructures) 
     { 
      <tr> 
       <td> 
        <div class="control-group"> 
         <input type="text" class="col-md-12 form-control autosave" name="manufacturer" placeholder="Produsent" value="@infrastructure.Manufacturer" /> 
         <input type="hidden" class="autosave" name="id" value="@infrastructure.Id" /> 
         <input type="hidden" class="autosave" name="superOfficeCustomerId" value="@Model.SuperOfficeCustomerId" /> 
        </div> 
       </td> 
       <td> 
        <div class="control-group"> 
         <input type="text" class="col-md-12 form-control autosave" name="model" placeholder="Modell" value="@infrastructure.Model" /> 
        </div> 
       </td> 
       <td> 
        <div class="control-group"> 
         <input type="text" class="col-md-12 form-control autosave" name="serialNumber" placeholder="Serienummer" value="@infrastructure.SerialNumber" /> 
        </div> 
       </td> 
       <td> 
        <div class="control-group"> 
         <input type="text" class="col-md-12 form-control autosave" name="firmware" placeholder="Firmware" value="@infrastructure.Firmware" /> 
       </div> 
      </td> 
     </tr> 
    } 
</tbody> 

@section SpecializedScripts 
{ 
    <script type="text/javascript"> 
     function saveSettings(element, ajaxUrl, ajaxType) { 
      var fields = $(element).closest('tr').children('td').children('div').children('.autosave'); 
      var abort = false; 

      var ajaxData = {}; 
      $(fields).each(function() { 
       abort = ($(this).val() == '' || $(this).val() == null); 
       backgroundColor = abort == true ? '#d9534f' : '#f9f598'; 

       $(this).css('background-color', backgroundColor).css('color', '#ffffff').stop().animate({ 'background-color': '#ffffff', 'color': '#000000' }, 1500); 

       ajaxData[$(this).prop('name')] = $(this).val(); 
      }); 

      if (abort == true) { 
       return false; 
      } 

      $.ajax({ 
       url: ajaxUrl, 
       type: ajaxType, 
       data: ajaxData 
      }).success(function (data, textStatus, jqXHR) { 
       $(fields).each(function() { 
        $(this).css('background-color', '#5cb85c').css('color', '#ffffff').stop().animate({ 'background-color': '#ffffff', 'color': '#000000' }, 1500); 
       }); 

       switch(data.status) 
       { 
        case 'Deleted': 
         $(element).closest('tr').remove(); 
        break; 
        case 'Added': 
         var tableBody = $('tbody'); 
         var html = '<tr>'; 
         for (var field in data.result) { 
          if (field == 'id' || field == 'superOfficeCustomerId') 
          { 
           html += '<input type="hidden" class="autosave" name="' + field + '" value="' + data.result[field] + '" />'; 
          } 
          else { 
           html += '<td>' 
             + '<div class="control-group">' 
              + '<input type="text" class="col-md-12 autosave form-control" name="' + field + '" value="' + data.result[field] + '" />' 
             + '</div>' 
            + '</td>'; 

           $('input.new[name=' + field + ']').val(''); 
          } 
         } 
         html += '</tr>'; 
         $(tableBody).append(html); 
        case 'Modified': 
         $(fields).each(function() { 
          $(this).val(data.result[$(this).prop('name')]); 
         }); 
        break; 
       } 
      }).fail(function() { 
      }); 
     } 

     $(document).on('blur', 'input.autosave', function() { 
      saveSettings($(this), '/Link/SaveInfrastructure', 'POST'); 
     }); 

     $(document).on('change', 'input.new', function() { 
     }); 
    </script> 
} 

回答

0

像這樣的東西應該工作:

$('input.new').on('blur', function() { $(this).val(''); $(this).text(''); });

只需確保輸入的存在,當你綁定的事件,否則,你可以這樣做:

$(document).on('blur', 'input.new', function() { $(this).val(''); $(this).text(''); });

+0

這與我已有的並不完全不同。爲什麼你會在val('')之後運行文本('')? val('')應該是足夠的,但它似乎不是在這種情況下。 – Maritim 2014-10-22 12:49:51

+0

取決於輸入類型,我也有一些瀏覽器清除值,但框中的文本沒有立即改變。 – 2014-10-22 12:50:50

+0

我明白了。那麼,我在我的val('')調用下添加了文本(''),仍然沒有在瀏覽器中顯示它已被清除,但是如果我試圖在調用val('')之後控制檯記錄字段的值,它顯示的值爲空。雖然不顯示在瀏覽器中。有任何想法嗎? – Maritim 2014-10-22 12:51:39