функция JQuery перестает работать после открытия и закрытия модального окна

Question

У меня есть скрипт, который в настоящее время работает, чтобы выключить и на «любит» на моей странице:

<script> 
$(document).ready(function() { 
    $('.like').click(function() { 
     $(this).not(this).removeClass('click'); 
     $(this).toggleClass("click"); 
    }); 
}); 
</script> 

Но когда я открываю модальное окно, содержащее HTML (с тем же сценарием на этой странице в настоящее время), а затем закройте его, функция перестала работать на базовой странице. Кнопки «like» больше не работают.

Еще один бит информации, это приложение AngularJS с (в настоящее время) очень простыми модулями. Я уверен, что проблема может быть решена в Angular (любые решения приветствуются), но я хотел, по крайней мере, сначала запустить jQuery, прежде чем переводить его.

Вот модальное окно HTML:

<div class="popup-input"> 
    <div class="feed-box"> 
     <div class="photo-submit"> 
      <a href="#" id="photo"><img src="images/pic1-large.jpg"></a> 
     </div> 
     <div class="comments"> 
      <div class="comment"> 
      <a class="avatar"> 
       <div class="center"> 
        <img src="images/meg.jpg"> 
       </div> 
      </a> 
      <div class="post-content"> 
       <a class="author">Meg Robichaud</a> 
       <div class="metadata pull-right"> 
       <div class="date"> 
        <ul class="margin-zero"> 
        <li><a href=""><img src="images/reply.png" alt="Add Photo" id="reply"></a></li> 
        <li><div class="like"></div></li> 
        <li class="time-posted">25m</li> 
       </ul> 
      </div> 
     </div> 
     <div class="text"> 
      My view this morning is simply beautiful... <a href="">instagram.com/p/mV0PUrHRwQ/</a> 
     </div> 
    </div> 
</div> 
<div class="col-wrapper"> 
    <input type="text" placeholder="Reply..." class="reply" maxlength="30"> 
</div> 
</div> 
</div> 
</div> 

<!-- TOGGLE FUNCTION LIKE BUTTON --> 
<script> 
$(document).ready(function() { 
    $('.like').click(function() { 
     $(this).not(this).removeClass('click'); 
     $(this).toggleClass("click"); 
    }); 
}); 
</script> 

Если у меня нет сценария в этом отдельном HTML файле не будет загружаться при открытии модального (я знаю, что должно быть лучшее решение чем удвоение по сценарию).

Вот скрипт, который загружает модальное окно:

<!-- MODAL IMAGE POPUP --> 
<script> 
$(document).ready(function() { 
    $('#photo').click(function(e) { 
     e.stopPropagation(); 
     $.get('image.html', function(data){ 
      modal.open({content: data}); 
     }); 
    }); 
}); 
</script> 

И, наконец, вот всплывающее окно файл модальный скрипт на который ссылается:

var modal = (function(){ 
    var 
    method = {}, 
    $overlay, 
    $modal, 
    $content, 
    $close; 

     // Center the modal in the viewport 
     method.center = function() { 
      var top, left; 

      top = Math.max($(window).height() - $modal.outerHeight(), 0)/2; 
      left = Math.max($(window).width() - $modal.outerWidth(), 0)/2; 

      $modal.css({ 
      top:top + $(window).scrollTop(), 
      left:left + $(window).scrollLeft() 
      }); 
     }; 

     // Open the modal 
     method.open = function (settings) { 
      $content.empty().append(settings.content); 

      $modal.css({ 
      width: settings.width || 'auto', 
      height: settings.height || 'auto' 
      }); 

      method.center(); 
      $(window).bind('resize.modal', method.center); 
      $modal.show(); 
      $overlay.show(); 
     }; 

     // Close the modal 
     method.close = function() { 
      $modal.hide(); 
      $overlay.hide(); 
      $content.empty(); 
      $(window).unbind('resize.modal'); 
     }; 

     // Generate the HTML and add it to the document 
     $overlay = $('<div id="overlay"></div>'); 
     $modal = $('<div id="modal"></div>'); 
     $content = $('<div id="content"></div>'); 
     $close = $('<a id="close" href="#">close</a>'); 

     $modal.hide(); 
     $overlay.hide(); 
     $modal.append($content, $close); 

     $(document).ready(function(){ 
      $('body').append($overlay, $modal);   
     }); 

     $close.click(function(e){ 
      e.preventDefault(); 
      method.close(); 
     }); 

     return method; 
     }()); 

     // Calls 
     $(document).ready(function() { 

     $('#message').click(function(e) { 
      $.get('popup-form.html', function(data){ 
      modal.open({content: data}); 
      }); 
     }); 

     $('#test').click(function(e) { 
      $.get('popup-form.html', function(data){ 
      modal.open({content: data}); 
      }); 
     }); 

     $('a#photo').click(function(e){ 
      modal.open({content: "Hows it going?"}); 
      e.preventDefault(); 
     }); 


     }); 

Answer 1

Модальное содержится внутри текущая страница (такая же DOM), и любой скрипт, загружаемый через модальный, будет перенесен на основную страницу.

Если вы используете делегированное событие на «главной странице», оно должно работать и в модальном режиме.

$(document).on('click', '.like', function(e) { ... }); 

Это будет означать, что вы можете пропустить сценарий в модальных и сэкономить двойную привязку (вероятный преступник).

Но я также немного смущен из-за вашего использования $(this).not(this). this - это элемент с щелчком, поэтому вы, по существу, говорите, что получите элемент clicked (jQueryfied), но не элемент с нажатием. Он читает мне неправильный, и я думаю, что вы имеете в виду, чтобы сделать это вместо:

$('.click').not(this).removeClass('click'); 

Это позволит удалить класс с именем click, из всех элементов, содержащих указанный класс кроме от щелкнутого элемента.

Answer 2

Я просто передаю событие для функции щелчка и использую event.preventDefault(). для прекращения распространения текущего события.

$(document).ready(function() { 
     $('.like').click(function (event) { 
      $(this).not(this).removeClass('click'); 
      $(this).toggleClass("click"); 
    event.preventDefault(); 
     }); 
    });