Chiudi popup semplice modale [chiuso] - jquery, wordpress, simplemodal

Sto usando il modale semplice per creare un popup, provo ad aggiungere un pulsante che chiuderà il popup ma non è successo nulla quando lo faccio clic.

1. libreria js del modello di esempio allegata

di seguito è riportato il codice jQuery

jQuery("a.postpopup").click(function(){
id = jQuery(this).attr("rel");
url="http://localhost/website/?page_id=81";
jQuery("<div id="ajax-popup"></div>").hide().appendTo("body").load(url+"&id="+id).modal();
return false;
});
//btn to close the popup
jQuery("#btnclose").click(function(){
alert("hello"); // close code should be placed here but alert didn"t executed.
});

sotto è il codice nella mia pagina modello (popup)

<?php
/*
Template Name: my template
*/
?>
<?php
$post = get_post($_GET["id"]);
?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<div class="whatever">
<div id="popheader">
<img id="popimg" src="/images/http://localhost/website/wp-content/uploads/2014/12/logo1.png" width="200" height="auto"/>
<font id="popup-title" class="entry-title" > <?php the_title()?> </font>
<input type="button" id="btnclose" /> //btn to close the pop
</div>
<table class="tblcontent">
<tr>
<td id="popup-content">
<?php the_content(); ?>
</td>
</tr>
</table>
</div>
<?php endif; ?>

Quindi, come posso chiudere questo pop-up

risposte:

Perché #btnclose non esiste ancora. Quando si carica un contenuto Ajax è necessario associare gli eventi, solo dopo che il contenuto è stato caricato.

jQuery("a.postpopup").click(function(){
id = jQuery(this).attr("rel");
url="http://localhost/website/?page_id=81";
jQuery("<div id="ajax-popup"></div>")
.hide()
.appendTo("body")
.load(url+"&id="+id, function(data){
jQuery(data).find("#btnclose").click(function(e){
alert("Button clicked");
});
})
.modal();

return false;
});

Oppure modifica il modello e collega la funzione al clic sul pulsante:

<input type="button" id="btnclose" onclick="doSomething()" /> //btn to close the pop

function doSomenthing() {
alert("Button Clicked");
}