Q&A
Closed
jQueryでクラスをつけたものに再度JQueryでアラートを出させたい。
JQueryでクラスをつけたものをクリックしたときに、アラートを表示させたいが、表示されない。
// ①classをつける。
$(function() {
// ボタンをクリックしたら発動
$('#button').click(function() {
$("#button").addClass('button');
});
});
//②classをクリックしたらアラートを出す。
$(function() {
// ボタンをクリックしたら発動
$('.button').click(function() {
alert("アラートを表示します。")
});
});
・①classをつける。でclass="button"になっていることを確認。
「②classをクリックしたらアラートを出す。」のリスナをアタッチするタイミングの問題でしょう。その時点では $('.button') の要素は存在してませんから。
以下のようにしたらどうなりますか？
// ①classをつける。
$(function () {
// ボタンをクリックしたら発動
$('#button').click(function () {
$("#button").addClass('button');
$('.button').click(function () {
alert("アラートを表示します。")
});
});
});
//②classをクリックしたらアラートを出す。
//$(function () {
// // ボタンをクリックしたら発動
// $('.button').click(function () {
// alert("アラートを表示します。")
// });
//});
@dandan999
Questioner
②でちゃんとアラートが出ました。ありがとうございます。
クローズしてください
それなら その親にイベント仕込んで移譲したらいいのではないでしょうか？
予め親(.parent)配下にしておけば次の様に書けます。
// ①classをつける。
$(function() {
// ボタンをクリックしたら発動
$('#button').click(function() {
$("#button").addClass('button');
});
});
//②classをクリックしたらアラートを出す。
$(function() {
// ボタンをクリックしたら発動
$('.parent').on('click', '.button', function() {
alert("アラートを表示します。")
});
});
@dandan999
Questioner
アラート表示できました。ありがとうございます。