jQuery函数在打开和关闭模态窗口后停止工作

Question

我有这个脚本，目前正在关闭和打开我页面上的“喜欢”：

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

但是当我打开一个包含 html 的模式窗口（当前在此页面上使用相同的脚本），然后关闭它时，该函数已停止在基础页面上工作。 “喜欢”按钮不再起作用。

还有一点信息，这是一个带有（当前）非常简单的模块的 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();
        });
    });