我有一张表格,最多可以一人添加6个人(pic1)。
“ ADD”和“ +”都添加用户并清除表单。这会将一段HTML附加到#worker-container
并通过进行隐藏display: none
。
这是代码的HTML部分。
<div id="team_box_btns">
<div id="team_add_worker_icn">
<span id="team_add_worker"><i class="fas fa-plus-circle fa-2x"></i></span>
</div>
<p class="form-text-header"><span id="team_add_worker_btn" title="add employee">ADD</span> MAX OF 6 USERS </p>
</div>
<div id="worker-container">
<div id="team_worker" class="frame_worker">
<div class="row">
<div class="col-md-6">
<label for="team_name" class="form-text-header">Name</label>
<input id="team_name" name="team_name" type="text" class="form-control name" placeholder="" required>
</div>
<div class="col-md-6">
<label for="team_s_name" class="form-text-header">Surname</label>
<input id="team_s_name" name="team_s_name" type="text" class="form-control s_name" placeholder="" required>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="team_tel" class="form-text-header">Phone</label>
<input id="team_tel" name="team_tel" type="tel" class="form-control team" placeholder="" required>
</div>
<div class="col-md-6">
<label for="team_mail" class="form-text-header">Email</label>
<input id="team_mail" name="team_mail" type="mail" class="form-control mail" placeholder="" required>
</div>
</div>
</div>
</div>
这是JS / jQ部分:
var addWorker = $('here goes the HTML from above').appendTo($('#worker-container'));
var addWorkerIcn = $('<span id="worker_' + worker_num + '_data"><i class="fa fa-user-circle fa-2x" aria-hidden="true" title="'+ name.value +' '+ s_name.value + '"></i></span>').appendTo($('#team_add_worker_icn'));
因此,追加后看起来像这样:
我希望能够单击绿色的右上方用户图标来显示添加的用户的详细信息。我知道它与动态添加的元素有关,我需要使用冒泡性来让jQuery知道新元素。我可以通过动态添加来做到这一点,addWorkerIcn
并显示警报。
$('body')。on('click',addWorkerIcn,function(){alert('click'); //设置display:addWorker元素上的块});
我的问题是,addWorker
单击另一个附加元素后如何显示附加元素?我希望它在单击图标后显示。我可以通过click
事件触发它,但这不是我想要的。
无需将事件附加到新创建的元素上,只需为创建的元素创建一个自定义类并在页面加载时进行此绑定即可:
$("body").on('click', '.your-class', function(e){
var $el = $(this);
})
这样,您无需每次都在主体上添加click事件,而是有一个事件会在标记.your-class
内单击元素时触发body
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句