Question

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

js库样本模型附件

下面是jQuery Code

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

关闭弹出简单模态

1 个答案: