logo标签列表

使用.hide()不能隐藏灯箱

javascriptjquerylightbox
3

这是我第一次提问，希望我做得对。

我正在尝试使用jQuery/javascript创建一个 lightbox。虽然lightbox已经显示出来了，但当我想要隐藏它时，它无法正常工作。

希望有人能在这里帮助我解决这个问题。

$('.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>
你需要展示一些HTML代码，并检查在调用这个轻箱插件后，你所编写的HTML是否与实际呈现的不同。 - Scott Selby
在你的HTML中我没有看到元素<.. id="lightbox">，它在哪里？ - Scott Selby
它藏在JS中的'<div id="lightbox">' + ;)。 - Wez
2个回答
3
可能是因为你的灯箱 div 在 DOM 加载后动态加载 - 请尝试这样做。
$('body').on('click', '#lightbox', function() {

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

});
你可能是对的，没有HTML你不能百分之百确定，但我已经删除了我的答案。 - Scott Selby
".on('click' 方法应该适用于 DOM 元素之后的元素，就像 live() 一样。" - alou
@alou - 不行，它只适用于以这个答案中所写的方式动态创建的元素，而不是 OP 所拥有的方式。 - Scott Selby
@speccaN，你是对的，你需要使用on()来进行委托事件，我只是在检查一下...抱歉。 - alou
当与其他控件（如XPagedList）混合使用时，我必须停止事件传播/冒泡：$('.pagination').on('click', 'a', function (e) { e.stopPropagation(); $('.lightbox').css("display", "none"); }); - Junior Mayhé
0
如果您创建动态HTML，则需要在创建元素后绑定单击事件。
$('.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();
});
    }

});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接