Question

提前致谢。我的HTML包含：

    <div class="help-link">
       <a href="">WHY?</a>
   </div>

和

    <div class="modal-container">
    <div data-id="modal1" class="status-modal modal">
        <div class="modal-body">
            <header>Status</header>
            <p><span class="fnt-wt-500"></span> Lorem Ipsum is simply 
                      dummy text of the printing and typesetting industry.</p>
            <p><span class="fnt-wt-500"></span> Lorem Ipsum has been 
                     the industry's standard dummy text ever since the 1500s.</p>
            <p><span class="fnt-wt-500"> </span>Various versions have 
                     evolved over the years, sometimes by accident.</p>
            <div class="modal-footer clearfix">
                <a href="#" class="close">OK</a>
            </div>
        </div>
    </div>
  </div>
  <div class="modal-backdrop">
  </div>

JQuery代码就像

       $(document).ready(function() {


        $(".help-link a").click(function(e) {
            console.log("help link a clicked ");
            e.preventDefault();
            if (!$(".modal-backdrop, .modal-container").hasClass("open")) {
                $(".modal-backdrop, .modal-container").addClass("open");
            } else {
                $(".modal-backdrop, .modal-container").removeClass("open");
            }
             });
         });
       }

但是我无法记录帮助链接a上的点击事件。请帮忙。我错过了jquery中的某些内容吗？

Answer 1

您的代码末尾有一个额外的“}”，请将其删除，然后尝试

Answer 2

你在这个函数的末尾有一个额外的花括号

$（document）.ready（function（）{

    $(".help-link a").click(function(e) {
        console.log("help link a clicked ");
        e.preventDefault();
        if (!$(".modal-backdrop, .modal-container").hasClass("open")) {
            $(".modal-backdrop, .modal-container").addClass("open");
        } else {
            $(".modal-backdrop, .modal-container").removeClass("open");
        }
         });
     });
   **}**

删除它，它将起作用

Answer 3

你应该摆脱一个额外的花括号。以下链接显示控制台日志：

https://codepen.io/anon/pen/rwOYqX?editors=1011

工作jquery代码：

    $(document).ready(function() {
    $(".help-link a").click(function(e) {
        console.log("help link a clicked ");
        e.preventDefault();
        if (!$(".modal-backdrop, .modal-container").hasClass("open")) {
            $(".modal-backdrop, .modal-container").addClass("open");
        } else {
            $(".modal-backdrop, .modal-container").removeClass("open");
        }
    });
 });

Answer 4

你最后有一个额外的支架。另外，我使用了on()而不是click()。

$(document).ready(function() {
  $(".help-link a").on('click', function(e) {
    console.log("help link a clicked ");
    e.preventDefault();
    var modalContainer = $(".modal-backdrop, .modal-container");
    if (!modalContainer.hasClass("open")) {
      modalContainer.addClass("open");
    } else {
      modalContainer.removeClass("open");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="help-link">
  <a href="">WHY?</a>
</div>

<div class="modal-container">
  <div data-id="modal1" class="status-modal modal">
    <div class="modal-body">
      <header>Status</header>
      <p><span class="fnt-wt-500"></span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <p><span class="fnt-wt-500"></span> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <p><span class="fnt-wt-500"> </span>Various versions have evolved over the years, sometimes by accident.</p>
      <div class="modal-footer clearfix">
        <a href="#" class="close">OK</a>
      </div>
    </div>
  </div>
</div>
<div class="modal-backdrop">
</div>

没有在jQuery中获得click事件

4 个答案: