Question

我有这个脚本，目前正在关闭和开启＆＃34;喜欢＆＃34;在我的页面上：

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

但是当我打开一个包含html的模态窗口（当前在此页面上使用相同的脚本），然后关闭它时，该函数已停止在底层页面上工作。＆＃34;喜欢＆＃34;按钮不再有效。

还有一点信息，这是一个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

我只是将事件传递给click功能，并使用 event.preventDefault（）。停止当前的事件传播。

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

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

2 个答案: