Question

我有一个由JavaScript代码加载的图形，这个图包含一个图像描述和两个按钮，有时描述有一个带有一个名为fig的属性的锚，见下文。

<a fig="allow" href="#tt5">[1]</a>

现在如果锚不在图中并且属性图是允许的，JS将通过添加类属性=弹出窗口来创建图形，并且该图将显示在链接下方，因此锚点将如下所示：

<a class="pop-up" fig="allow" href="tt5">[o]</a>

但是在我的情况下，锚点在一个图中，所以我需要关闭图，但似乎.click和.live不起作用。

这是我尝试过的：

使用.live()：

$viewer.find('div > div > span.Figcontent > a').live('click',function() {
     toggleViewerCaption();
});

使用.click

$viewer.find('div > div > span.Figcontent > a').click(function(){
    toggleViewerCaption();
});

注意：

通过在控制台中对此进行测试，我确保上述内容正在访问正确的锚点，并返回tt5。
即使控制台返回正确的值，调试器也不会达到上述语法的断点。

Answer 1

我有一个由JavaScript代码加载的数字......

您应该使用事件委派 on() ，因为您处理动态生成的DOM：

$viewer.on("click", "div > div > span.Figcontent > a", function(){
    toggleViewerCaption(); 
});

注意：

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。

希望这有帮助。

Answer 2

如果您不确定该元素何时添加到dom，则不应使用find。

相反，像这样：

<!DOCTYPE html>
<html>
<head>
 <title>JQuery Query</title>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">     </script>
 <script>
  $(document).ready(function(){

      $( "#trans" ).addClass( "getTransparent" );
       $( "#opaq" ).addClass( "getOpaque" );

      });
   </script>
   <style>

   body{

       background-color: #F0FFFF; 
    }
   .myClass{

       height: 100px;
       background-color: #4863A0;

    }
   .getTransparent{

        opacity: 0.3;  

    }
    .getOpaque{

        opacity: 1 !important;

     }
     </style>

 </head>
      <body id="trans">

 <div id="opaq" class="col-md-6 col-md-offset-3 myClass">
 This is supposed to be opaque to every detail...
 </div> 

      </body>
 </html>

.click无法使用图形内的锚点

2 个答案: