关闭弹出简单模式[关闭]

Question

我正在使用简单的模式来创建一个弹出窗口，我尝试添加将关闭弹出窗口的按钮，但是当我单击它时没有任何反应。

1. 附上示例模型的js库

下面是 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.
  });

下面是我的模板页面中的代码（弹出）

<?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="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; ?>

那么，我怎样才能关闭这个弹出窗口

Answer 1

因为#btnclose 还不存在。加载 ajax 内容时，您应该绑定事件，仅在加载内容之后。

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;
});

或者修改你的模板并将函数附加到按钮点击：

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

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