✔ JQuery innerhalb eines mit Ajax befülltem Dialog funktioniert nicht

[Gray]

Hi,

ich habe folgendes Problem, ich öffne ein Dialog welches per Ajax befüllt wird.

function showUrlInDialog(url){
    var wWidth = $(window).width();
    var dWidth = wWidth * 0.4;
    var tag = $("<div></div>");
        $.ajax({
        url: url,
        success: function(data) {
            tag.html(data).dialog({
                autoOpen: false,
                position: { my: 'center', at: 'center', of: window },
                width: dWidth,
                modal: true
            }).dialog('open');
        }
    });
}

Das funktioniert auch einwandfrei.

Wenn ich nun aber innerhalb dieses Dialog wiederum versuche z.B. nur per Click ein alert auszugeben wird dies komplett ignoriert.

$('#asp').click(function(){
    alert('test');
});

asp ist in dem Fall die ID des Buttons der geklickt wird.

Wie bekomme ich JQuery innerhalb dieser Dialog Box zum laufen?

Vielen Dank

 

[SpiceLab]

Vermutlich genügt hier der bloße Mausklick, den Dialog zu schliessen.

Von daher versuch' mal, diese Aktion mit einem bestimmten Element/Objekt zu verknüpfen, um den Klick auf den Alert-Button davon auszuschliessen:

• https://api.jquerymobile.com/dialog/#method-close
• https://api.jqueryui.com/dialog/#event-close

 

[SpiceLab]

In Anlehnung an https://jqueryui.com/dialog/ habe ich ein Fiddle hergerichtet, um zu schauen, wie es sich damit verhält, und kann Dir "nur" mitteilen, dass hier alles nach Deinen Vorstellungen funktioniert.

• https://jsfiddle.net/SpiceLab/4ygrdLay/

 

[Sempervivum]

asp ist in dem Fall die ID des Buttons der geklickt wird.

Ich nehme an, dieser befindet sich innerhalb des HTML, das Du mit Ajax lädst? Dann musst Du den Eventhandler registrieren, nachdem Du den Inhalt geladen hast:

function showUrlInDialog(url){
    var wWidth = $(window).width();
    var dWidth = wWidth * 0.4;
    var tag = $("<div></div>");
        $.ajax({
        url: url,
        success: function(data) {
            tag.html(data).dialog({
                autoOpen: false,
                position: { my: 'center', at: 'center', of: window },
                width: dWidth,
                modal: true
            }).dialog('open');
            $('#asp').click(function(){
                alert('test');
            });
        }
    });
}