2

ボタンでモーダルインラインを作成すると...それぞれがクリックされたときに特定のアクションを実行できるようにしたい。ただし、モーダルで生成されたこれらのボタンをつかむことができません。

これらを取得する方法を知っている人はいますか?

$('.open-popup-link').magnificPopup({
    items: {
        type: 'inline',
        src: $('<div class="white-popup">\
                    <h4>Are you sure you were discharged for failing a drugs test?</h4>\
                    <p>You will not be able to change your answer once you have submitted these details.</p>\
                    <button id="test-popup-no">No, I\'ve made a mistake</button>\
                    <button id="test-popup-yes">Yes, I\'m sure</button>\
                    </div>')
    },
    type: 'inline',
    midClick: true
});

各ボタンがクリックされたときに、その ID に応じて異なるアクションを実行したいと思います。

できれば助けてください。私はこれに苦労してきました。標準のjQuery選択を行うだけではうまくいかないようです。

ありがとう、マイケル。

4

2 に答える 2

4

@Irvin によって投稿されたコードは有効ですが、アプリのパフォーマンスに関してはあまり良くありません。クリック イベントをバインド/バインド解除するには、open/close コールバックを使用することをお勧めします。

$('.open-popup-link').magnificPopup({
    items: {
        type: 'inline',
        src: $('<div class="white-popup">\
                    <h4>Are you sure you were discharged for failing a drugs test?</h4>\
                    <p>You will not be able to change your answer once you have submitted these details.</p>\
                    <button id="test-popup-no">No, I\'ve made a mistake</button>\
                    <button id="test-popup-yes">Yes, I\'m sure</button>\
                    </div>')
    },
    type: 'inline',
    midClick: true,
    callbacks: {
        open: function() {
            this.content.on('click.mycustomevent', '#test-popup-no', function() { 
                alert('hello world');
            });
        }, 
        close: function() {
           this.content.off('click.mycustomevent');
        }
    }
});
于 2013-12-17T23:06:46.403 に答える
2

jQuery でのイベント委任を使用して、クリック ハンドラーのバインドを試すことができますon。

セレクターが提供されている場合、イベント ハンドラーは委任されていると見なされます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。jQuery は、イベント ターゲットからハンドラーがアタッチされている要素 (つまり、最も内側の要素から最も外側の要素) までイベントをバブルし、セレクターに一致するそのパスに沿ったすべての要素に対してハンドラーを実行します。

コード：

$('.open-popup-link').magnificPopup({
    items: {
        type: 'inline',
        src: $('<div class="white-popup">\
                    <h4>Are you sure you were discharged for failing a drugs test?</h4>\
                    <p>You will not be able to change your answer once you have submitted these details.</p>\
                    <button id="test-popup-no">No, I\'ve made a mistake</button>\
                    <button id="test-popup-yes">Yes, I\'m sure</button>\
                    </div>')
    },
    type: 'inline',
    midClick: true
});

$('body').on('click','#test-popup-no', function(){
    alert('Nope!');    
})

$('body').on('click','#test-popup-yes', function(){
    alert('Yes');    
})

デモ: http://jsfiddle.net/IrvinDominin/A9dQ7/

于 2013-12-17T10:17:07.470 に答える