0

HTMLファイルに手動で配置していくつかのテストポップアップを実行していましたが、それらを閉じる必要があったJS関数は正常に機能しました。ただし、ポップアップを動的に追加すると、閉じる機能が壊れて削除できません。

ボタンがクリック.popupされたときにクラス内のすべてのポップアップを閉じるように指示する JS 関数を次に示します。.closeコードには、ユーザーが閉じるボタンの上にカーソルを置いたときに閉じるボタンの画像を切り替えるホバー機能も含まれていますが、これも壊れています。

$('.popup').on('click', '.close', function() {
    $(this).closest('.popup').remove(); //or .hide() if you just want to hide the popup
});

$('img.close').hover(function () {
    this.src = '/engine/themes/img/popup.close.hover.png';
}, function () {
    this.src = '/engine/themes/img/popup.close.idle.png';
});

そして、これがDOMに追加する私の方法です

var popupID = 'popup1';
// Create popup div
var popupHTML = '<div id="'+popupID+'" class="popup">'+
    '<div class="toolbar"><div id="title">Please Wait</div>'+
    '<img class="close" src="/engine/themes/img/popup.close.idle.png" alt="Close" title="Close" />'+
    '</div><p class="text">Loading...<p></div>';

$('body').append(popupHTML);

$.ajax({
    url: pageURL,
    cache: false,
    success: function(data) {
        var matches, pageTitle;

        matches = data.match(/<title>(.*?)<\/title>/);
        pageTitle = 'MERKD.COM';
        if ( typeof matches !== 'undefined' && matches != null ) {
            pageTitle = matches[1];
        }

        $('#'+popupID).html(strReplace('Loading...', data, $('#'+popupID).html()));
        $('#'+popupID).html(strReplace('Please Wait', pageTitle, $('#'+popupID).html()));
    } // end success call
}); // end ajax function

下部にあるのは、単に使用するのではなく、手動で作成した置換メソッドを使用していることに注意してください$('#popup1 p').html('some text');。これを行うと、2 回取得されたテキストが表示されるdataためです。

dataポップアップを動的に追加したときにこれが機能しなくなった理由についてはわかりませんが、通常の呼び出し.html()または.text()jQuery 呼び出しを行うときに取得したテキストが 2 回表示される理由もわからないため、何かを見落としていることは確かです。.

4

1 に答える 1

1

これを試して：

var hovered;
$(document).on('mouseenter','img.close',function () {
    hovered = this;
    this.src = '/engine/themes/img/popup.close.hover.png';
});
$(document).on('mouseleave','img.close',function () {
    hovered.src = '/engine/themes/img/popup.close.idle.png';
});

イベント ハンドラーは、選択した要素にのみバインドされ、コードが読み込まれる時点で既にページに存在している必要があります。それ以外の場合は、それを修正するために、イベント委任を使用して、イベント ハンドラーを既に存在する "何か" に追加することができます。これdocumentは常に安全なカードです。

.on()についてもっと読む

編集：

私は自分のコードを修正しましたが、実際にそれを認識し.on()、hover一緒に動作しないので、代わりにmouseenter&に適応しました。委任を使用する必要があるため、とにかくここで.hover()mouseleaveを使用することはできません。

jQueryのドキュメントから：

jQuery 1.8 で非推奨、1.9 で削除: 文字列「mouseenter mouseleave」の短縮形として使用される「hover」という名前。これらの 2 つのイベントに対して 1 つのイベント ハンドラーをアタッチし、ハンドラーは event.type を調べて、イベントが mouseenter または mouseleave であるかどうかを判断する必要があります。"hover" 疑似イベント名を、1 つまたは 2 つの関数を受け入れる .hover() メソッドと混同しないでください。

于 2013-09-12T21:29:24.387 に答える