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是點擊元素，所以你基本上說得到點擊元素（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(); 
     }); 
    });