Javascript 锚定和提交按钮按下事件不起作用_Javascript_Jquery_Html

Javascript 锚定和提交按钮按下事件不起作用

javascript jquery html

Javascript 锚定和提交按钮按下事件不起作用,javascript,jquery,html,Javascript,Jquery,Html,您可以在上查看以下代码我的完整代码如下 <html> <head> <title>Test Page</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <style> .dark

您可以在上查看以下代码我的完整代码如下

<html> 
<head> 
<title>Test Page</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>

.darkContent{
    position: fixed;
    background-color: white;
    border: 5px solid black;
    padding: 8px;
    overflow: hidden;
    color: #333;
    font-family: arial;
}
.darkCover{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 900;
    background-color: black;
    opacity: 0;
    width: 100%;
    height: 100%;
}
</style>

</head> 
<body> 
    <a href="javascript:;" data-target="#useThisDiv1" class="btn blue btn-xs darkBox">Show Box1</a>
    <form action="save.php" method="post">
    <div id="useThisDiv1" width="500" height="500">
        <h3 class="breadcrumb">Div TWO</h3>
        <div class="row" id="popup3">
            <div class="col-md-12">
                <div class="portlet">
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <textarea rows="2" cols="50" name="notification_text"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 ">
                                <div class="portlet-body form">
                                    <div class="form-body pull-right">
                                        <a href="javascript:;" class="btn yellow btn-xs add_case_note_cls" id="btn_close_div3"> Cancel </a> &nbsp;
                                        <a href="javascrip:;" id="saveNotification" class="btn yellow btn-xs"> save </a>
                                        <input type="submit" value="save" name="savethis">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>

<script>
$(function(){
    function darkBox(div){
        var w = (div.attr('width')) ? div.attr('width') : div.width();
        var h = (div.attr('height')) ? div.attr('height') : div.height();

        var box = $('<div></div>').addClass('darkCover');
        $('body').prepend(box);
        box.fadeTo('fast', 0.8);
        $(this).keydown(function(e){
            if(e.keyCode == 27){
                box.hide();
                contentBox.hide();
            }
        });

        var contentBox = $('<div></div>').html(div.html());
        contentBox.addClass('darkContent');

        var x = $(window).width()/2;
        var y = $(window).height()/2;
        var endTop = y - h/2;
        var endLeft = x - w/2;

        contentBox.css("left", endLeft+"px");
        contentBox.css("top", endTop+"px");
        contentBox.css("z-index", "910");
        contentBox.css("width", w+"px");
        contentBox.css("height", h+"px");

        $('body').prepend(contentBox);
        contentBox.show();

    }

    $('.darkBox').each(function(){
        var div = $($(this).attr('data-target'));
        div.hide();
        $(this).click(function(){
            darkBox(div);
        });
    });

    $('.add_case_note_cls').click(function(){
        alert('foo');
        console.log('foo');
    });

});
</script> 

</body> 
</html>


测试页
.黑色内容{
位置：固定；
背景色：白色；
边框：5px纯黑；
填充：8px；
溢出：隐藏；
颜色：#333；
字体系列：arial；
}
darkCover先生{
位置：固定；
左：0px；
顶部：0px；
z指数：900；
背景色：黑色；
不透明度：0；
宽度：100%；
身高：100%；
}
第二组
$（函数（）{
函数暗盒（div）{
变量w=（div.attr（'width'））？div.attr（'width'）：div.width（）；
变量h=（div.attr（'height'））？div.attr（'height'）：div.height（）；
变量框=$（''）.addClass（'darkCover'）；
$（'body'）。前缀（框）；
框。fadeTo（'fast'，0.8）；
$（此）.keydown（函数（e）{
如果（e.keyCode==27）{
box.hide（）；
contentBox.hide（）；
}
});
var contentBox=$（''）.html（div.html（））；
addClass（'darkContent'）；
var x=$（窗口）.width（）/2；
变量y=$（窗口）.height（）/2；
var endTop=y-h/2；
var endLeft=x-w/2；
css（“left”，endLeft+“px”）；
css（“top”，endTop+“px”）；
css（“z-index”，“910”）；
css（“宽度”，w+“px”）；
css（“高度”，h+“px”）；
$（'body'）.prepend（contentBox）；
contentBox.show（）；
}
$（'.darkBox'）。每个（函数（）{
var div=$（$（this.attr（'data-target'））；
隐藏分区（）；
$（此）。单击（函数（）{
暗箱（div）；
});
});
$（'.add_case_note_cls'）。单击（函数（）{
警报（“foo”）；
console.log（'foo'）；
});
});

如果我点击三个按钮中的任何一个，我都不会得到任何回应。我有两个锚定标签和一个提交按钮，它们不工作。它们的单击事件没有注册，我尝试用它们的类名调用它们，如

$（'.classname.）。单击（function（）{alert（'foo）；}）并使用调用它们的id，如$（'#cancelbtn.）。单击（函数（）{alert（'foo）；}）
再次链接
我不知道我做错了什么，知道吗？
这里的主要问题是，当您显示HTML时，实际上是在克隆HTML。我不确定您是否打算这样做，但这就是您在执行var contentBox=$（''）.html（div.html（））。因此，当您最初使用add\u case\u note\u cls
类将单击处理程序绑定到元素时，该类仅适用于DOM中当前存在的元素。但是，您最终看到的元素是在执行darkBox（）
函数期间创建的，因此没有附加单击处理程序
有几种方法可以纠正这个问题
将单击处理程序的绑定移动到darkBox（）
函数中。也许就在最后
切换到使用而不是。单击（）
以附加单击处理程序。这将允许您使用委派事件，这将允许单击处理程序对稍后添加到DOM中的元素激发。因此，不要使用$（'.add_case\u note\u cls'）。单击（function（）{
你会得到类似$（'body'）。在（'click'，'上。add_case\u note\u cls'，function（）{
）
使用原始HTML而不是克隆它。这可能是一个选项，也可能不是一个选项，取决于您的最终目标是什么。如果您试图使用相同的基本HTML，但将其复制到多个位置，那么这将不起作用。但如果您不这样做，那么您应该能够做到
另外，这不是问题的原因，但是这里有一个输入错误，Hello@PatrickQ这个类不存在，它只是一个通过类名捕获元素的名称我做了…
它在代码中，@PatrickQthanks@patrick Q lemme实现了这一点，让我看看发生了什么……感谢您的努力：）