jquery - 新しく挿入された PHP コンテンツで .click を toggleClass("hidden") にバインドします。イベントバブリング？

Question

編集: KK のおかげで、この問題を解決できました! 正しく動作するコードは、投稿の下部にあります。

私は JavaScript と jQuery を初めて使用し、この問題に数日間苦労しましたが、あきらめません!

私の関数はすべて $(function () { の下にあるため、準備ができている DOM にすべてロードされます。.php ページからコンテンツをロードする作業ボタンがあり、新しくロードされたコンテンツには別のボタンがあります。 clicked は、iFrame から「非表示」クラスを削除するなど、基本的なことを行う必要があります。

以下は最初のボタンです（念のため e.preventDefault を削除しました）

$(function() {
  $('.top5').click( function(e) {
    $("#currentactivity").html('<img src="./images/loading.gif" alt="loading" />').show();
    var url= "index.php";
    $.post(url, {q:$(this).attr('value')}, function(data){
      $("#currentactivity").html(data).show();
    });
  });
});

以下は 2 番目のボタンでの 2 つの試行で、どちらも機能しません。

// using .live()
  $('body').live("click", function(event) {
    if ($(event.target).hasClass("missionopen") {
      var $target = $('#missioniframe');
      if $target.hasClass("hidden") {
        $target.toggleClass("hidden");
      }
    });
  });

// Just plain event bubbling (Since body is already loaded?)
  $('body').click(function(event) {
    if ($(event.target).hasClass('missionopen')) {
      $('#missioniframe').toggleClass('hidden');
    }
  });

ここに、button1、button2 (php からロード)、および iframe HTML スニペットがあります。

<a href="#" class="top5" value="1"><img src="./images/qstata.png" /></a> 

<a href='#' class='missionopen' value='1'><img class='missionhero' src='./images/bluebutton1.png' /></a>

<iframe src='missioniframe.html' class='hidden' id='missioniframe' frameborder='0' scrolling='no' ></iframe>

作業コード: KK 提供

  $('body').on("click", ".missionopen", function(e) {
    $('#missioniframe').toggleClass("hidden");
    e.preventDefault();
  });