gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:45:57 29 4
gpt4 key购买 nike

您可以在以下位置查看以下代码 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() 执行期间创建的。函数,因此没有附加点击处理程序。

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

  1. 将点击处理程序的绑定(bind)移至 darkBox() 内功能。也许就在最后。

  2. 切换到使用 .on() 而不是.click()用于附加点击处理程序。这将允许您使用委托(delegate)事件,这将允许单击处理程序在稍后添加到 DOM 的元素上触发。所以而不是 $('.add_case_note_cls').click(function(){你会得到类似 $('body').on('click', '.add_case_note_cls', function(){ 的内容.

  3. 使用原始 HTML,而不是克隆它。这可能是也可能不是一个选择,具体取决于您的最终目标是什么。如果您尝试使用相同的基本 HTML,但将其复制到多个位置,那么这将不起作用。但如果你不是,那么你应该能够做到。

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

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

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

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com