すべてのコンテンツがbootrstrap内部unclickableある `

Question

が、私はこの機能を備えたAPI応答にカードを作成

row`：ここ

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> 
    `); 
} 

とresultブロックです：

<div id="result" class="row"></div> 

そしてここでjQueryのイベントハンドラです：

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

問題は、コンソールログはありません。starのブロックは他のブロックと同じようにresultブロック内にありますが、それはresultと大丈夫です。

ちなみに、ホバー疑似クラススタイリングをstar要素に適用すると、まったく問題なく動作します。だから、グリフコンがどのようにホバー上で色を変えるのかを見ることができますが、クリックイベントでは反応しません。

私の質問は、ブートストラップrowクラス内のすべてのコンテンツが解除不可能な理由です。

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作品、私は上記のスニペットをクリックしたとき：