javascript - anchor 和提交按钮按下事件不起作用-6ren

javascript - anchor 和提交按钮按下事件不起作用

转载作者：行者123 更新时间：2023-12-03 11:45:57

您可以在以下位置查看以下代码 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>

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

再一次jsfiddle链接

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

最佳答案

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

您可以通过几种方法来纠正此问题。

将点击处理程序的绑定(bind)移至 darkBox() 内功能。也许就在最后。
切换到使用 .on() 而不是.click()用于附加点击处理程序。这将允许您使用委托(delegate)事件，这将允许单击处理程序在稍后添加到 DOM 的元素上触发。所以而不是 $('.add_case_note_cls').click(function(){你会得到类似 $('body').on('click', '.add_case_note_cls', function(){ 的内容.
使用原始 HTML，而不是克隆它。这可能是也可能不是一个选择，具体取决于您的最终目标是什么。如果您尝试使用相同的基本 HTML，但将其复制到多个位置，那么这将不起作用。但如果你不是，那么你应该能够做到。

另外，这不是你的问题的原因，但你这里有一个错字<a href="javascrip:;" id="saveNotification" 。你漏掉了一个“t”。

如果您希望点击处理程序在链接和按钮上都触发，则需要确保所有这些都具有适当的类。

关于javascript - anchor 和提交按钮按下事件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26044197/

文章推荐： javascript - 设置 var 成功

文章推荐： javascript - D3强制布局应在单击节点时添加节点和链接

文章推荐： javascript - 单选按钮值未显示

文章推荐： javascript - 计算单个字符串的字母。 JavaScript

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - anchor 和提交按钮按下事件不起作用