Come posso rilevare che il pulsante di chiusura (X) di una finestra di dialogo dell'interfaccia utente jQuery è stato selezionato, separatamente dalla finestra di dialogo/chiusura?

Mi piacerebbe essere in grado di rilevare il pulsante di chiusura (x) di un Dialogo UI jQuery cliccato, ma non voglio usare gli eventi dialogclose/dialogbeforeclose (poiché credo che questi funzioneranno indipendentemente da come il dialogo era chiuso).Come posso rilevare che il pulsante di chiusura (X) di una finestra di dialogo dell'interfaccia utente jQuery è stato selezionato, separatamente dalla finestra di dialogo/chiusura?

Ho provato $(".ui-dialog-titlebar-close").live("click"), ma non sembra funzionare.

Come posso fare questo?

Codice esempio: (il debugger non si attiva quando il dialogo è chiuso).

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script> 

    <script> 
    $(document).ready(function() { 
    $("#dialog").dialog(); 

    $(".ui-dialog-titlebar-close").live("click", function() { 
     debugger; // ** clicking the close button doesn't get to here.** 
     }); 
    }); 
    </script> 
</head> 

<div id="dialog" title="Dialog Title">I'm in a dialog</div> 

</body> 
</html>

fonte

2011-10-28 John Carter

utilizzare l'evento 'create' per associare la funzionalità –

si potrebbe fare esattamente quello che JAAulde suggerito, o evitando il monitoraggio vincolante e utilizzare l'evento create:

$(document).ready(function() { 
    $('#dialog').dialog({ 
     create: function() { 
      $(this).closest('div.ui-dialog') 
        .find('.ui-dialog-titlebar-close') 
        .click(function(e) { 
         alert('hi'); 
         e.preventDefault(); 
        }); 
     } 
    }); 
});

fonte

2011-10-28 01:39:39

Ah, sapevo che doveva esserci un metodo/evento 'create'-like, ma non mi sono preoccupato di cercarlo. +1 e dovresti ottenere una risposta accettata sulla mia! – JAAulde

Solo curioso, hai qualche idea del perché '$ (". Ui-dialog-titlebar-close "). Live (" click ")' non spara? Si attiva se si modifica l'evento come "mouseover' – Quincy

Non sono del tutto sicuro di questo, ma i legamenti' live' su DOM root, nel caso di 'click' non viene visualizzato perché il widget attiva già l'esecuzione su questo elemento e la catena non viene continuata, il debugging più complesso potrebbe scoprire il motivo –

Davvero buona domanda

E 'di lavoro se si utilizza solo il clic

$(".ui-dialog-titlebar-close").click(function() { 
     debugger; 
     });

ma sono sicuro che ci sia un motivo per il live?

io continuerò cercando

E il motivo per cui non voglio utilizzare questo?

$('.selector').bind('dialogclose', function(event, ui) { 
    debugger; 
});

fonte

2011-10-28 01:23:32 GregM

questo è stato perfetto per quello che volevo - l'approccio bind. Grazie! – hynsey

Devo essere d'accordo con GregM - perché non un semplice 'legare' tutte le risposte su questa pagina è stato l'unico che ha funzionato per me. Potrebbe aver avuto qualcosa a che fare con il fatto che il mio dialogo veniva creato dinamicamente. – TrueBlue

Non si vuole fare questo tramite .live ecc come si finirà per il legame alla X di ogni finestra di dialogo che si crea. Si vuole legarsi a X di una finestra specifica per uno scopo specifico, in modo da ...

Nota Prima di leggere, si noti che questo funziona perfettamente, ma è troppo complessa. Kris Ivanov ha pubblicato una risposta più corretta, più concisa, più appropriata. Fine nota

Nel metodo aperto della finestra di dialogo, verificare se hai già associato il clic alla 'X'. In caso contrario, la bandiera che avete e poi trovare del l'istanza di 'X' e associarlo:

$(function() 
{ 
    $('#dialog').dialog({ 
     open: function() //runs every time this dialog is opened 
     { 
      var $dialog = $(this); 

      if(! $dialog.data('titleCloseBound')) 
      { 
       $dialog 
        .data('titleCloseBound', true) //flag as already bound 
        .closest('div.ui-dialog') //traverse up to the outer dialog wrapper 
         .find('a.ui-dialog-titlebar-close') //search within it for the X 
          .bind('click', function(e) //bind it 
          { 
           alert('hi'); 
           e.preventDefault(); 
          }); 
      } 
     } 
    }); 
});

È necessario il controllo per se è stato legato perchè open viene eseguito ogni volta si apre la finestra di dialogo, in modo che più si apre sarebbe associare nuovamente la stessa funzionalità più e più volte senza di essa.

Demo:http://jsfiddle.net/XM2FH/

fonte

2011-10-28 01:27:09 JAAulde

non è molto efficiente per tenere traccia del binding, basta usare l'evento 'create' invece di' open' –

@KrisIvanov lol, sì, guarda il mio commento alla tua risposta e la mia nota aggiunta alla mia. – JAAulde

sì, non l'ho visto sry, non ha effettuato il downgrade, informazioni ancora utili –

So che questa è una vecchia questione, e la OP ha detto che non voleva usare beforeClose, ma il motivo era perché spara sempre, anche per cose diverse dalla X. Tuttavia, ho notato che le tecniche qui non mi permettono di impedire la chiusura di un dialogo (voglio un confir m finestra per aprire se ci sono modifiche non salvate). Se facciamo qui le tecniche, usa beforeClose, possiamo ottenere il risultato desiderato, ma renderlo cancellabile.Io ho usato:

beforeClose: function (e, ui) { 
    if ($(e.currentTarget).hasClass('ui-dialog-titlebar-close') && whateverMyConditionIs) 
     e.preventDefault(); 
}

Pensavo che potesse aiutare qualcun altro!

fonte

2015-04-28 13:47:12 dman2306

Come posso rilevare che il pulsante di chiusura (X) di una finestra di dialogo dell'interfaccia utente jQuery è stato selezionato, separatamente dalla finestra di dialogo/chiusura?

risposta

Problemi correlati