Скрыть/показать радиокнопки прекратить работу с сохранением

Question

Вот мое дело: я разрабатываю небольшой виджет, и я искал способ скрыть/показать разные DIV при выборе набора радиокнопок. Я нашел правильный код и приспособил его к моим потребностям. Единственная проблема заключается в том, что скрыть/показать функция перестает работать после нажатия на кнопку Сохранить при настройке виджета: S

Вот JS:

jQuery(document).ready(function($) { 
    $(document).ready(function() { 
     $('input[type="radio"]').click(function(){ 
      if($(this).attr("value")=="link_to_image"){ 
       $(".radio-option").hide(); 
       $(".linked-image").show(); 
      } 
      if($(this).attr("value")=="link_to_page"){ 
       $(".radio-option").hide(); 
       $(".linked-page").show(); 
      } 
     }); 
    }); 
}); 

И HTML:

<p> 
    <label>Link:</label><br> 
    <label> 
     <input type="radio" name="link_to" value="link_to_image"> 
     Link to image 
    </label><br> 
    <label> 
     <input type="radio" name="link_to" value="link_to_page"> 
     Link to page 
    </label> 
</p> 
<div class="linked-image radio-option"> 
    <label for="linked_image">Linked image:</label> 
    <p> 
     Content for linked_image DIV 
    </p> 
</div> 
<div class="linked-page radio-option"> 
    <label for="linked_page">Linked page:</label> 
    <p> 
     Content for linked_page DIV 
    </p> 
</div> 

И [JSFiddle] (http://jsfiddle.net/ccwsy5z4/)

Не могли бы вы дать мне руку с этим, ребята?

Answer 1

Итак, я выяснил, что проблема в том, что JS перестала работать после запуска AJAX, нажав кнопку «Сохранить».

И решение для этого состояло в том, чтобы вспомнить функцию JS после того, как AJAX завершил работу. Для этого мне сначала нужно было указать имя функции JS, после этого вызвать его, а затем снова вызвать его после остановки AJAX. Как это:

jQuery(document).ready(function($) { 

    function radioButtonShow() { 

     if($(this).attr("value")=="link_to_image") { 
      $(".radio-option").hide(); 
      $(".linked-image").show(); 
     } 

     if($(this).attr("value")=="link_to_page") { 
      $(".radio-option").hide(); 
      $(".linked-page").show(); 
     } 

    }; 

    $('input[type="radio"]').click(radioButtonShow); 

    $(document).ajaxStop(function() { 

     $('input[type="radio"]').click(radioButtonShow); 

    }); 

}); 

Надеется, что это может быть полезным для кого-то :)