Может только изменить шрифт-семейство текста с jQuery один раз

Question

У меня возникла проблема с изменением семейства шрифтов моего текста с помощью jQuery.

Мой HTML:

<select id="message-font-selection" class="promo"> 
         <option value="Oswald">Oswald</option> 
         <option value="Open Sans">Open Sans</option> 
         <option value="Montserrat">Montserrat</option> 
         <option value="Indie Flower">Indie Flower</option> 
         <option value="Poiret One">Poiret One</option> 
        </select> 


<div class="middle-section">{{middle_msg}}</div> 

Мои ЯШ:

$('#message-font-selection').change(function() { 
    $('.middle-section').css('font-family',$(this).val()); 
}); 

Проблема заключается в том, что я могу только изменить шрифт один раз. Однако, когда я пытаюсь выбрать другое семейство шрифтов для второго, третьего, четвертого и т. Д. Времени, шрифт уже не будет заметно изменяться. Однако, когда я проверяю элемент, я вижу, что стиль шрифта для этого текста действительно изменяется ... но эти изменения не отражаются на экране ... У меня есть тот же самый точный код для шрифта- цвет, и это, кажется, работает просто отлично.

Answer 1

Пожалуйста, посмотрите на код,

он работает, когда я попытался с основными шрифтами, которые доступны по всему миру,

<select id="message-font-selection" class="promo"> 
         <option value="arial">arial</option> 
         <option value="times new roman">times new roman</option> 
         <option value="calibri">calibri</option> 
        </select><br><br><br><br> 
<div class="middle-section">This is test</div> 


$('#message-font-selection').change(function() { 
    $('.middle-section').css('font-family',$(this).val()); 
}); 

Благодаря

Answer 2

Ваш вопрос с использованием " это »:

$(document).on('change', $('#message-font-selection'), function() { 
    alert('The value of $(this).val() is: ' + $(this).val()); 
    $('.middle-section').css('font-family',$('#message-font-selection').val()); 
}); 

Как вы можете видеть, заменив« $ (this) .val() »ссылкой на этот элемент исправляет проблему.

Также, используя $ (document) .on listener, вы можете прослушивать изменение элемента, даже если оно не существует, когда регистратор зарегистрирован.

Fiddle: https://jsfiddle.net/nebulousal/jvk0t2x8/

Answer 3

Я проверил ваш код с незначительными изменениями (Изменения по имени шрифта) и это работает прекрасно.

<select id="message-font-selection" class="promo"> 
      <option value="Oswald">Oswald</option> 
      <option value="fantasy">fantasy</option> 
      <option value="monospace">monospace</option> 
      <option value="cursive">cursive</option> 
      <option value="Poiret One">Poiret One</option> 
     </select> 

     <div class="middle-section">Test</div> 

JS

 $('#message-font-selection').change(function() { 
    $('.middle-section').css('font-family',$(this).val()); 
    });