Как заставить работать скрипт на скрытых блоках?

Question

Пытаюсь поменять класс у родителя если дочериный блок не пуст. Есть скрипт, в тесте все работает, класс у родителя удаляет и присваивает, но когда пытаюсь на сайте завести, он не работает. У родителя внутри целое древо div-ов, тот что проверяется пуст или заполнент находиться в самой глубине древа, я использую .closest() чтобы обратиться непосредственно к родительскому блоку и тем самым удалить класс.

Как я уже говорил, на тесте все работает.

$(document).ready(function() {
    if ($('.fr-element').text()) {  
        $('.fr-element').closest('.infonext_block').removeClass('input_remove').css('display', 'block');
    }
});

.input_remove {display:none}
.fr-element {padding:0 20px;height: 50px; border: 1px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infonext_block input_remove">
  <span>Заголовок</span>
 <div class="1">
 	<div class="2">
 	 <div class="3">
       <div class="fr-element" contenteditable="true"><br/>3333</div>
     </div>
   </div>
 </div>
</div>

На сайте структура блоков добавляется автоматически со стороны CMS движка, когда в шаблоне вывожу textarea тегом, что в итоге, посмотрев в консоле браузера, я вижу целую разметку. В этой разметке находиться блок с классом .fr-element, который и проверяется заполнен или пуст, чтобы выполнить действие и удалить класс у родителя, как мы видим в примере.

Либо скрипт загружается первым чем древо блоков, что в итоге не срабатывает, либо что-то другое.

Скрин консоли:

Скрипт не хочет работать с этой цепочкой блоков, которая сформирована самим движком. Если прописать те же блоки в шаблоне, и выводить самостоятельно для теста, все прекрасно работает, пример с теми же классами выше.

Как можно решить? Прошу помощи!

Сама разметка после преобразования документа:

$(document).ready(function() {
    if ($('.fr-element').text()) {  
        $('.fr-element').closest('.infonext_block').removeClass('input_remove').css('display', 'block');
    }
});

.input_remove {display:none}
.fr-element {border:1px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infonext_block input_remove">
         <span class="btn_prim icons-info-circled-alt">Нет полей для заполнения!</span>
          <span class="add_h5">Укажите недостающие ингредиенты:</span>
           <div class="text_primehanie">
           	 <div class="wseditor">
           	 	<!--panel-->
           	 	 <div class="fr-box fr-ltr gray-theme fr-basic fr-top" role="application" style="width: 100%;">
           	 		<div class="fr-toolbar gray-theme fr-ltr fr-desktop fr-top fr-basic" style="">
           	 	      <div class="fr-wrapper show-placeholder" dir="ltr" style="height: 314px; overflow: auto;">

<!-- БЛОК КОТОРЫЙ ПРОВЕРЯЕМ -->
           	 		    <div class="fr-element fr-view" dir="ltr" contenteditable="true" aria-disabled="false" style="min-height: 290px;" spellcheck="true"> 
                            ПРОВЕРКА ЭТОГО БЛОКА НА ПУСТОТУ, ЕСЛИ ЗАПОЛНЕН ТО УДАЛЯЕМ КЛАСС (input_remove)  У РОДИТЕЛЯ  (infonext_block)
           	 		    	<br>
           	 		    </div>
<!-- END БЛОК КОТОРЫЙ ПРОВЕРЯЕМ -->

           	 		      <span class="fr-placeholder" style="font-size: 14.4px; line-height: 21.6px; margin-top: 0px; padding-top: 10px; padding-left: 10px; margin-left: 0px; padding-right: 10px; margin-right: 0px; text-align: start;">Впишите те игредиенты, которые нужно добавить к рецепту. Каждый новый ингредиент пишите с новой строки. НАПРИМЕР: Помидор - 1 шт, Мясо куриное - 200 гр и т.е.</span>
           	          </div>
           	 	           <span class="fr-counter" style="bottom: 2px; margin-right: 0px;">0</span>
           	        </div>
           	 	      <textarea name="xfield[zametka_admin]" id="xf_zametka_admin" class="wysiwygeditor" placeholder="Впишите те игредиенты, которые нужно добавить к рецепту. Каждый новый ингредиент пишите с новой строки. НАПРИМЕР: Помидор - 1 шт, Мясо куриное - 200 гр и т.е." style="display: none;"></textarea>
           	     </div>
           	 </div>
           </div>
        </div>

Исходный код сформированный при вставке в шаблон работает, класс удаляет и добавляет. Не могу понять почему, если не добавлять в шаблон сформированный код, и выводить тегом textarea, то не работает. При выводе тегом текстовое поле, движок автоматом скрывает его на странице и формирует ввод текста через div contenteditable, что в итоге получаем громоздкий код со всем на свете.

Проблема была решена, я забыл сам скрипт вставить в основной документ, что в итоге он и не срабатывал. Всем спасибо за помощь!

БЛОГ НА HUSL

Как заставить работать скрипт на скрытых блоках?

Ответы (0 шт):