在 jQuery 中未获得点击事件

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");
            }
             });
         });
       }

但是我无法记录点击帮助的事件-link a。请帮忙。我在 jquery 中错过了什么吗？

Answer 1

你在这个函数的末尾多了一个花括号

$(文档).ready(函数() {

    $(".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 2

有一个额外的大括号你应该去掉。以下 link 显示控制台日志：

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 3

你最后多了一个括号。另外，我使用了 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>

Answer 4

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

在 jQuery 中未获得点击事件

Not getting click event in jQuery

jquery

jquery-click-event