Question

您可以在上面查看以下代码 jsfiddle我的完整代码也在

之下

<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>

如果我点击它们中的任何一个三个按钮我没有得到任何响应，我有两个锚标签和一个提交按钮，它们不工作。他们的点击事件没有注册我通过使用类似$('.classname).click(function(){alert('foo);});的类名调用它们并使用$('#cancelbtn).click(function(){alert('foo);});调用它们来尝试它们。

再次jsfiddle链接

我不知道我在这里做错了什么，任何想法？

Answer 1

这里的主要问题是您在展示HTML时基本上克隆了HTML。我不确定你是否打算做什么，但这是你做var contentBox = $('<div></div>').html(div.html());时所做的事情。因此，当您最初将单击处理程序绑定到具有add_case_note_cls类的元素时，这仅适用于DOM中当前存在的元素。但是，您最终看到的元素是在执行darkBox()函数期间创建的，因此没有附加点击处理程序。

有几种方法可以纠正这个问题。

将点击处理程序的绑定移动到darkBox()函数内。也许就在最后。
切换为使用.on()代替.click()来附加点击处理程序。这将允许您使用委托事件，这将允许单击处理程序触发稍后添加到DOM的元素。因此，$('.add_case_note_cls').click(function(){代替$('body').on('click', '.add_case_note_cls', function(){，而不是<a href="javascrip:;" id="saveNotification"。
使用原始HTML而不是克隆它。根据您的最终目标，这可能是也可能不是一种选择。如果您尝试使用相同的基本HTML，但将其复制到多个位置，那么这将无法正常工作。但如果你不这样做，那么你应该能够做到。

此外，它不是您的问题的原因，但您在这里有一个拼写错误{{1}}。你错过了一个＆＃34; t＆＃34;。

如果您希望点击处理程序在两个链接和按钮上触发，您需要确保在所有链接和按钮上都有相应的类。

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

1 个答案: