0

Jqueryを使用して、Webページの上部に通知を表示しています。次の関数を使用して通知バーを表示しています-

function myBar(message) {
    $("<div />", { class: 'mybar', text: message, id: 'mymsg' }).hide().prependTo("body")
      .slideDown('slow');
}

そして、$(document).ready(function(){私はmyBar("my message");適切なcssを使用してを呼び出しています。必要に応じてバーを表示しています。

ここで、バーをクリックしたときにバーを非表示にします。そのために私はこれを試しています

$("#mymsg").click(function() {
     $(this).remove();
})

しかし、これはそのようには機能していません。何が間違っているのかについての提案はありますか？

4

2 に答える 2

3

イベントハンドラーを追加するときにdivがまだ存在しない場合、jQueryセット$("#mymsg")は空であり、イベントハンドラーは追加されません。

代わりに使用できますon：

$(document.body).on('click', "#mymsg", function() {
     $(this).remove();
});

または、必要に応じて、divを追加するときにイベントをバインドできます。

function myBar(message) {
    $("<div />", { class: 'mybar', text: message, id: 'mymsg' }).click(function(){
       $(this).remove();
    }).hide().prependTo("body").slideDown('slow');
}
于 2013-02-07T13:46:14.417 に答える
1

ページが読み込まれるとき、メッセージ要素はDOMにまだ存在しないため、クリックイベントハンドラーは要素にバインドされません。

これは1回限りのメッセージのように思われるため、作成関数でイベントハンドラーを直接チェーンすることを検討してください。例えば：

function myBar(message) {
    $("<div />", {
        class: 'mybar',
        text: message,
        id: 'mymsg'
    }).hide().prependTo("body").slideDown('slow').click(function() {
        $(this).remove();
    });
}
于 2013-02-07T13:50:24.910 に答える