Skip to main content
本文に 38 文字追加
ソース リンク
naga3
  • 655
  • 4
  • 10

もしくita_3yさんのように追加要素にイベントを組み込む方法もありますし、もしくこの以下のように親要素にイベント処理を委譲するか、ですね方法もあります

$(function(){
    $('.hogehoge').on('click', function() {
        $(this).append('<p class="fugafuga">追加した</p>');
        return false;
    });

    $('.hogehoge').on('click', '.fugafuga', function() {
        alert('fugafuga');
        return false;
    });
});
.hogehoge {
    border: 1px solid black;
}

.fugafuga {
    width: 5em;
    border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hogehoge">
  この中をクリックして
  <p class="fugafuga">元からある</p>
</div>

もしくこのように親要素にイベント処理を委譲するか、ですね

$(function(){
    $('.hogehoge').on('click', function() {
        $(this).append('<p class="fugafuga">追加した</p>');
        return false;
    });

    $('.hogehoge').on('click', '.fugafuga', function() {
        alert('fugafuga');
        return false;
    });
});
.hogehoge {
    border: 1px solid black;
}

.fugafuga {
    width: 5em;
    border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hogehoge">
  この中をクリックして
  <p class="fugafuga">元からある</p>
</div>

ita_3yさんのように追加要素にイベントを組み込む方法もありますし、もしく以下のように親要素にイベント処理を委譲する方法もあります

$(function(){
    $('.hogehoge').on('click', function() {
        $(this).append('<p class="fugafuga">追加した</p>');
        return false;
    });

    $('.hogehoge').on('click', '.fugafuga', function() {
        alert('fugafuga');
        return false;
    });
});
.hogehoge {
    border: 1px solid black;
}

.fugafuga {
    width: 5em;
    border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hogehoge">
  この中をクリックして
  <p class="fugafuga">元からある</p>
</div>

ソース リンク
naga3
  • 655
  • 4
  • 10

もしくはこのように親要素にイベント処理を委譲するか、ですね。

$(function(){
    $('.hogehoge').on('click', function() {
        $(this).append('<p class="fugafuga">追加した</p>');
        return false;
    });

    $('.hogehoge').on('click', '.fugafuga', function() {
        alert('fugafuga');
        return false;
    });
});
.hogehoge {
    border: 1px solid black;
}

.fugafuga {
    width: 5em;
    border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hogehoge">
  この中をクリックして
  <p class="fugafuga">元からある</p>
</div>