सीएसएस jQuery ड्रैग/ड्रॉप के बाद सही ढंग से अपडेट नहीं हो रहा है लेकिन इंस्पेक्टर

Question

में करता है मेरे पास यह विषम मुद्दा है जहां नीचे दिए गए काले कंटेनर में आइटम ग्रिड पर खींचे जाते हैं। हालांकि वस्तुओं में यह अस्पष्टता/नारंगी दिखता है। सेल की संरचना में एक कंटेनर और वस्तु है। कंटेनर सेल में होवर पर एक नारंगी पृष्ठभूमि है, लेकिन अगर मैं काले कंटेनर से सेल को तेजी से ग्रिड में ले जाता हूं तो होवर यह नहीं दिखाता कि यह ठीक काम करता है।

अब इसके अंदर की वस्तु में "शो-गेम" नामक एक कक्षा है। यदि मैं इस पर अस्पष्टता को 1 से 0 तक और वेब इंस्पेक्टर में 1 तक टॉगल करता हूं तो मुझे ए 1 बनाम ए 4 की वांछित लगती है।

क्या मेरे क्रोम ब्राउज़र में कुछ गड़बड़ है? यह आईई में नहीं होता है। ऐसा लगता है कि शैली ताज़ा नहीं हो रही है।

<td class="item-container draggable-item-container clearfix ui-droppable"> 
          <div data-tooltip="" class="item clearfix draggable-active draggable-item show-game ui-draggable tooltip-init" style="background-color: rgb(255, 55, 108);" data-bind="draggableCss: { disabled: $data.Disabled(), matchup: $data.Matchup, invalid: $data.Invalid, current: $data.Current }, draggableGameHandler : { disabled: !$data.Matchup, disabledDrop: $data.Disabled() }, delegatedClick: $root.members.eventSchedule.editGame.open.bind($data, true, ($data.Matchup && $data.Matchup.Type == '@((int)ScheduleType.Pool)'), $parent.Games)"> 

          </div> 
         </td> 



ko.bindingHandlers.draggableCss = { 
     update: function (element, valueAccessor) { 

      var values = valueAccessor(); 

      $(element).toggleClass('ui-droppable-disabled', values.disabled); 
      $(element).toggleClass('hide-game', (!values.matchup || !values.matchup.Selected())); 
      $(element).toggleClass('show-game', (values.matchup && values.matchup.Selected()) ? true : false); 
      $(element).toggleClass('empty', !values.matchup); 
      $(element).toggleClass('expand', viewModel.showTeams()); 

      if (values.editable) { 
       $(element).addClass('editable-game'); 
      } 

      if (values.matchup) { 

       if (values.matchup.Selected()) { 
        $(element).removeClass('occupied', false); 
       } 

       if (values.invalid && values.invalid()) { 
        updateElementColors(element, values.matchup.Color, 'invalid'); 
       } 
       else if (values.current && values.current()) { 
        updateElementColors(element, values.matchup.Color, 'current'); 
       } 
       else { 
        updateElementColor(element, values.matchup.Color, false); 
       } 

       if (values.matchup.CrossGame) 
        $(element).addClass('cross-game'); 


      } else if (values.invalid && values.invalid() && !values.disabled) { 
       updateElementColors(element, null, 'invalid'); 
      } else { 
       $(element).removeClass('invalid').removeClass('current'); 
      } 
     } 
    }; 

Answer 1

आप गूगल क्रोम का उपयोग कर रहे हैं, तो खोलने टैब "परिकलित" करने के लिए टैब का निरीक्षण करें और तब। आपको इस तत्व पर लागू सभी सीएसएस और जहां यह सेट है, देखना चाहिए।

"छुपा" सीएसएस ओवरराइटिंग नियम की जांच करें।

यदि आप ओवरराइड से बचना चाहते हैं तो सीएसएस नियम में "महत्वपूर्ण" टैग आज़माएं।