CSS屬性使用的innerHTML

Question

當我試圖插入自定義jQuery的滑塊到我的HTML覆蓋掉了：

<p><input type="text" data-slider="true" data-slider-theme="volume" /> 
<span style="vertical-align: top"></span> 
<script> 
$("[data-slider]") 
    .bind("slider:ready slider:changed", function (event, data) { 
    $(this).nextAll("span").html(data.value.toFixed(3)); 
    }); 
</script></p> 

這是一個模態窗口內。當我將它硬編碼到模態窗口中時，它可以正常工作，樣式很完美。

但是，在我的javascript中，當我使用.append與div上的jQuery或.innerhtml插入它時，它顯示爲普通文本框，沒有自定義滑塊css，如硬編碼版本所示。

     insert_review.innerHTML += '\ 
         <li class="review">\ 
          <center>\ 
           <p><input type="text" data-slider="true" data-slider-theme="volume" />\ 
           <span style="vertical-align: top"></span>\ 
           <script>\ 
           $("[data-slider]")\ 
            .bind("slider:ready slider:changed", function (event, data) {\ 
            $(this).nextAll("span").html(data.value.toFixed(3));\ 
            });\ 
           <\/script></p>\ 
          <\/center>\ 
         </li>\ 
         '; 

Answer 1

使用CSS類而不是內部HTML樣式。從長遠來看，當你需要申請一大堆風格時，最好練習一下。但是，一旦你這樣做，只需添加！重要標籤。無論如何，這將使這個財產持有。

<style> 
    .myClass{ 
     vertical-align: top !important; 
    } 
</style>