Question

这是我第一次提出问题所以希望我做对了。

我正在尝试使用jQuery / javascript创建一个灯箱。灯箱显示但是当我想隐藏它时，它不起作用。

希望有人能帮到我这个

$('.lightbox_trigger').click(function(e){

    e.preventDefault();



    if ($('#lightbox').length > 0) {

        $('#lightbox').show();
    }
    else{
        var lightbox =
        '<div id="lightbox">' + 
            '<p>Click to close</p>' + 
            '<div id="content">' +  
                '<p id="lightboxTxt">TEXT HERE!</p>' + 
            '</div>' +
        '</div>';

        $('body').append(lightbox);
        $('#lightbox').show();
    }

});
    $('#lightbox').on('click', function(){
        $('#lightbox').hide();
});

修改这是html

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js.js"></script>
</head>

<body>
    <div id="logoDiv"><img src="images/logo.png"/>  </div>
<div id="topDiv">
  <div id="info">
      <h1>Information om oss</h1>
      <p>Information om sidan skrivs här</p>
    </div><!--end info-->
    <div id="form">
      <form id="loginForm" name"loginForm" action="" method="POST" class="loginForm">
          <h2>Inlogg</h2>
          <label>
              <span>Användarnamn: </span>
              <input id="userName" type="text" name="userName" placeholder="Ditt användarnamn" /><br>
          </label>

          <label id="passwordLabel">              
              <span id="passSpan">Lösenord: </span>
              <input id="password" type="password" name="password" placeholder="Ditt lösenord" /><br>
          </label>

          <label id="btnLabel">
              <!--<input type="button" class="button" value="Registrera" id="registerBtn" name="registerBtn"/>-->
              <a class="lightbox_trigger" href="http://www.google.se">Registrera</a>
          </label>
          <label>
              <!--<input type="button" class="button" value="Logga In" id="loginBtn" name="loginBtn"/>-->
              <a href="http://www.google.se" id="loginBtn">Logga In</a>

          </label>
      </form>
    </div><!--end form-->
</div><!--end topDiv-->

<!--<div id="regLight" class="regLighter"></div>
<div id="regDark" class="regDarker"></div>-->




<div id="footerDiv">
  <?php include ('footer.php'); ?>
</div><!--end footerDiv-->

</body>
</html>

Answer 1

可能是因为您的灯箱div在DOM加载后动态加载 - 试试这个。

$('body').on('click', '#lightbox', function() {

  $('#lightbox').hide();

});

Answer 2

如果您创建动态html，则需要在创建元素

后绑定click事件

$('.lightbox_trigger').click(function(e){

    e.preventDefault();



    if ($('#lightbox').length > 0) {

        $('#lightbox').show();
    }
    else{
        var lightbox =
        '<div id="lightbox">' + 
            '<p>Click to close</p>' + 
            '<div id="content">' +  
                '<p id="lightboxTxt">TEXT HERE!</p>' + 
            '</div>' +
        '</div>';

        $('body').append(lightbox);
        $('#lightbox').show();
      // you need to  Bind on click event after creating element 
       $('#lightbox').on('click', function(){
        $('#lightbox').hide();
});
    }

});

无法使用.hide（）隐藏灯箱

2 个答案: