2012-04-12 20 views
2

Ich möchte eine jquery onclick eines Hyperlinks aufrufen. aber jetzt erscheint der Dialog jedes Mal, wenn die Seite geladen wird. Ich verwende das Jquery-Beispiel von diesem example.Aufruf jquery auf Seite laden

$(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      width:500, 
      height:140, 
      modal: true, 
      buttons: { 
       "Confirm": function() { 
        $(this).dialog("close"); 
        autoGeneration(); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }); 

und HTML:

<div id="dialog-confirm" title="Overwrite?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Will be overwrite. continue?</p> </div> 

<a href="#" id="dialog-confirm" class="bigButton">AUTO GENERATION</a> 

ich auf Klick auf die unten einen Link aufgerufen werden soll und vermeiden Sie den Dialog jedes Mal onload der Seite aufgerufen wird.

Danke Ihnen allen für Ihre Antworten.

Antwort

1

setzen die autoOpten Option des Dialogfelds auf false:

$(function() { 
    $("#dialog-confirm").dialog({ 
     autoOpen: false 
     //other options 
    }); 
}); 

Ändern Sie die ID der Verbindung, so dass es anders ist als die des Dialog div:

<a href="#" id="openDialog" class="bigButton">AUTO GENERATION</a> 

Und dann rufen Sie einfach open auf der Dialog:

$("#openDialog").click(function(e){ 
    e.preventDefault(); 
    $("#dialog-confirm").dialog("open"); 
}); 
+0

Ich habe versucht, wie ur-Code. aber wenn ich auf den Link klicke, erscheint der Dialog nicht. – kitokid

+0

@PTY, Haben Sie meinen Code wörtlich kopiert/eingefügt? Wenn ja, hatte ich einen Tippfehler: Ich hatte ein zusätzliches Komma nach: 'autoOpen: false,'. Wenn Sie keine anderen Optionen an den Dialog übergeben, entfernen Sie das Komma nach 'false' und es sollte funktionieren. –

+0

yah .. Ich habe vergessen, . Vielen Dank. – kitokid

1
$(function() { 
     $("#dialog-box").dialog({ 
      autoOpen: false, 
      resizable: false, 
      width:500, 
      height:140, 
      modal: true, 
      buttons: { 
       "Confirm": function() { 
        $(this).dialog("close"); 
        autoGeneration(); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

    $("#dialog-confirm").click(function() { 
     $("#dialog-box").dialog("open"); 
     return false; 
    }); 

    }); 

Sie müssen unterschiedliche IDs für den „link“ und dem „Dialog“ so geänderten dialog bestätigen zu Dialog-Box

<div id="dialog-box" title="Overwrite?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Will be overwrite. continue?</p> </div> 

<a href="#" id="dialog-confirm" class="bigButton">AUTO GENERATION</a> 
+0

plus eins. Danke für die Erläuterung im Detail. – kitokid

0

allererst die autoOpen Eigenschaft des Dialogs false legen Sie es dem Öffnen auf Seite Last zu stoppen .

$(function() { 
    $("#dialog-confirm").dialog({ 
     autoOpen: false, 
     resizable: false, 
     width:500, 
     height:140, 
     modal: true, 
     buttons: { 
      "Confirm": function() { 
       $(this).dialog("close"); 
       autoGeneration(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
}); 

Dann öffnen Sie es in der Klick-Handler des Links:

$("#dialog-confirm").click(function(e) { 
    e.preventDefault; 
    $("#dialog-confirm").dialog('open'); 
}); 
0

Sie

tun sollten
var dialog = $("#dialog-confirm").dialog({ 
     autoOpen: false, 
     resizable: false, 
     width:500, 
     height:140, 
     modal: true, 
     buttons: { 
      "Confirm": function() { 
       $(this).dialog("close"); 
       autoGeneration(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
    }); 

und

$('a.bigButton').click(function(e){ 
    e.preventDefault(); 
    dialog.dialog("open"); 
}); 
+0

wenn ich wie oben versucht, scheint der Text in Div-Tag auf der Seite erscheint. – kitokid

+0

@PTY ja, natürlich muss das div versteckt sein, einfach set style = "display: none" drauf –