所有内容都在bootrstrap`row`中无法点击

Question

我使用此功能在API响应上创建卡片：

result

这是<div id="result" class="row"></div> 块：

$('.star').on('click', function() {
  console.log("!")
});

这是jquery事件处理程序：

star

问题在于，result块中没有任何控制台日志，但result块内的任何其他控制台日志都没有star本身。

顺便说一句，在row元素上应用悬停伪类样式绝对没问题，这样做非常好。所以，我可以看到一个glyphicon如何在悬停时改变它的颜色，但它对点击事件没有反应。

所以，我的问题是为什么bootstrap {{1}}类中的所有内容都是不可点击的？

Answer 1

您的内容是动态加载的。因此，您需要将事件委托给静态父级。

$(document).on('click', '.star', function() {
  console.log("!")
});

如上例所示，请使用静态父级而不是document。当没有静态父级时使用document。

$(function() {
  $(document).on('click', '.star', function() {
    console.log("!")
  });
});

function createCard (name, img, description) {
  $('#result').append(`
  <div class="col-md-4 col-sm-6 col-xs-12">
    <div class="card" style="height: 200px; border: 2px solid black; border-radius: 5px; overflow: hidden; padding: 15px; margin: 15px 0;">
      <div class="card-content" style="height: 100%; overflow: hidden;">
        <div class="star" style="height: 1.6em;">
          <span class="glyphicon glyphicon-star-empty pull-right"></span>
        </div>
        <div class="row">
          <div class="image col-xs-4" style="margin-top: 10px;">
            <figure style="height: 120px;">
              <img src=${img} alt="" style="max-width: 100%; max-height: 100%;">
            </figure>
          </div>
          <div class="description col-xs-8">
            <h4>${name}</h4>
            <p>${description}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  `);
}

createCard ("Hello World 1!", "//placehold.it/100", "Hello World 1!");
createCard ("Hello World 2!", "//placehold.it/100", "Hello World 2!");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result" class="row"></div>

单击上面的代码段时，console.log有效：