jQuery每个并附加单击事件
jQuery每个并附加单击事件
提问于 2018-07-23 16:31:31
我试图在每个class元素上实现条件单击事件。这是我的代码。
//Edit input field
$('.js-edit, .js-save').each(function(index) {
$(this).on("click", function() {
var $form = $(this).closest('form');
$form.toggleClass('is-readonly is-editing');
var isReadonly = $form.hasClass('is-readonly');
$form.find('input').prop('disabled', isReadonly);
});
});form.is-readonly .btn-save {
display: none;
}
form.is-readonly input[disabled],
form.is-readonly textarea[disabled] {
cursor: text;
background-color: #fff;
border-color: transparent;
outline-color: transparent;
box-shadow: none;
}
form.is-editing .btn-edit {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="is-readonly" action="" method="post">
<input type="text" class="form-control is-disabled" value="40" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
<input type="text" class="form-control is-disabled" value="38" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</form>
我有两个输入字段，在点击事件使两个字段都可编辑的时刻，我希望它分别为每个字段工作。
我希望你们能理解我的问题。
提前谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-23 16:51:26
这就是你想要实现的吗？
我将每个字段及其对应的按钮包装在一个div中，并对脚本进行了一些修改以匹配新的HTML。
//Edit input field
$('.js-edit, .js-save').each(function(index) {
$(this).on("click", function() {
var $group = $(this).closest('.group');
$group.toggleClass('is-readonly is-editing');
var isReadonly = $group.hasClass('is-readonly');
$group.find('input').prop('disabled', isReadonly);
});
});.group.is-readonly .btn-save {
display: none;
}
.group.is-readonly input[disabled],
.group.is-readonly textarea[disabled] {
cursor: text;
background-color: #fff;
border-color: transparent;
outline-color: transparent;
box-shadow: none;
}
.group.is-editing .btn-edit {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="group is-readonly">
<input type="text" class="form-control is-disabled" value="40" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
<div class="group is-readonly">
<input type="text" class="form-control is-disabled" value="38" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
</form>
Stack Overflow用户
发布于 2018-07-23 16:34:47
简单地分别附加事件：
$(document).on('click', '.js-edit', function(){
console.log('Coming from Edit Button')
});
$(document).on('click', '.js-save', function(){
console.log('Coming from SaveButton')
});Stack Overflow用户
发布于 2018-07-23 16:41:53
您为表单元素设置了类，但这是错误的。您应该为输入父类设置类(如容器类)
$('.js-edit, .js-save').on("click", function() {
var $form = $(this).closest('form');
var container = $(this).closest('.container');
container.toggleClass('is-readonly is-editing');
container.find('input').prop('disabled', $form.hasClass('is-readonly'));
});.container.is-readonly .btn-save {
display: none;
}
.container.is-editing .btn-edit {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="container is-readonly">
<input type="text" class="form-control is-disabled" value="40" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
<div class="container is-readonly">
<input type="text" class="form-control is-disabled" value="38" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51474576
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号