JQuery选择一个内部的Flat Admin V.2

时间:2016-01-25 21:19:57

标签: jquery html twitter-bootstrap

我无法使用标准方法从p元素内的元素注册click事件。 HTML来自Flat Admin V.2

<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <img src="../../img/thumbnails/picjumbo.com_IMG_4566.jpg" class="img-responsive">
        <div class="caption">
            <h3 id="thumbnail-label">Thumbnail label<a class="anchorjs-link" href="#thumbnail-label"><span class="anchorjs-icon"></span></a></h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a href="#" class="btn btn-default SELECT_ME" role="button">Button</a></p>
        </div>
    </div>
</div>

编辑:问题的另一半,即Javascript。

$(document).on('change', 'a', function(e) {
    console.log('does not register event')
})

$(document).on('change', 'div.caption > a', function(e) {
    console.log('does not register either');
})

$('.SELECT_ME').on('click', function(e) {
    console.log('this doesn\'t work either');
});

$('.SELECT_ME').change('click', function(e) {
    console.log('nope, this doesn\'t work either');
});

2 个答案:

答案 0 :(得分:1)

您需要确保首先加载元素。您可以使用$(document).ready()。您可以使用jquery选择器来获取所需的链接,然后将单击处理程序添加到jquery对象。

在下面的示例中,我向所有链接添加了一个点击处理程序,并在点击链接时警告链接的标签。

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
      $(document).ready(function () {
        $('a').click(function () {
          alert($(this).html());
        });
      });
    </script>
</head>
<body>
  <h1>Test</h1>
  <p><a href="#">This is a test</a></p>
  <p><a href="#">This the second link</a></p>
</body>
</html>

答案 1 :(得分:0)

为了防止将来对任何人有用,我将id分配给父div并在点击事件中钻取。

   <div id="parent_div_id" class="card-body col-xs-12" hidden>
     <div class="row">
       <div class="col-xs-12">
         <div class="card">
           <div class="card-body">
             <div class="row no-margin" id="dynamic_insert">

              </div>
           </div>
         </div>
       </div>
     </div>
  </div>

我通过以下方式获取参数,可能会或可能不会按预期为您工作

$('#parent_div_id').click(function(e) {
    var el = $(e.toElement);
    if (el.is('a')) // match
});