英文:
trigger click on mouse find previous i element
问题
我有一个页面，我使用一个i元素来添加一个表单行：
jQuery：
$('body').on('click','.newTask',function(){
var id= $(this).attr('data-tableId');
//ajax call to get
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text' class='last'></td>
</tr>
success:function(result){
$('#newTableRow_'+id).append(result);
//
});
表格：
<table id='1'>
<tr>
<td><i class="bi bi-plus-circle-fill fa-1x icon-green newTask" data-tableId='1'>Add Task</i></td>
</tr>
<tbody id='newTableRow_1'></tbody>
</table>
<table id='2'>
<tr>
<td><i class="bi bi-plus-circle-fill fa-1x icon-green newTask" data-tableId='2'>Add Task</i></td>
</tr>
<tbody id='newTableRow_2'></tbody>
</table>
当点击此内容时，newTask将向表单添加新行元素。
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text' class='last'></td>
</tr>
当用户从具有类名“last”的元素中移开时，我正在尝试触发newTask点击，以便自动添加新行，用户不必单击i。 以下代码会触发（当我focusout时会显示警报），但触发的点击事件未发生。
$('body').on('focusout','.last',function(){
alert('clicked');
$(this).closest('.newTask').trigger('click');
//我也尝试过
$(this).find('.newTask').trigger('click');
});
*注意 - 此页面上可能有许多包含.newTask单元格的表格。
英文:
I have a page where i use an i element to add a row to form:
jquery:
$('body').on('click','.newTask',function(){
var id= $(this).attr('data-tableId');
//ajax call to get
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text' class='last'></td>
</tr>
success:function(result){
$('#newTableRow_'+id).append(result);
//
});
the tables:
<table id='1'>
<tr>
<td><i class="bi bi-plus-circle-fill fa-1x icon-green newTask" data-tableId='1'>Add Task</i></td>
</tr>
<tbody id='newTableRow_1'></tbody>
</table>
<table id='2'>
<tr>
<td><i class="bi bi-plus-circle-fill fa-1x icon-green newTask" data-tableId='2'>Add Task</i></td>
</tr>
<tbody id='newTableRow_2'></tbody>
</table>
in which when this is clicked, newTask adds a new row of elements to the form.
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text' class='last'></td>
</tr>
when the user tabs out of the element with class "last", i am trying to trigger the newTask click so a new row will be automatically added and user doesnt have to click the i. the below code fires, (the alert shows when i focusout), but the trigger.click is not happening.
$('body').on('focusout','.last',function(){
alert('clicked');
$(this).closest('.newTask').trigger('click');
//I have also tried
$(this).find('.newTask').trigger('click');
});
*note - there could be many tables on this page that have the .newTask cell.
答案1
得分: 1
以下是翻译好的部分：
"要实现这个最简单的方法是给 <i> 元素添加一个ID，并触发通过ID选择的元素的点击事件。"
$('body').on('focusout', '.last', function() {
alert('clicked');
$('#add-task-button').find('.newTask').trigger('click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><i id="add-task-button" class="bi bi-plus-circle-fill fa-1x icon-green newTask">Add Task</i></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text' class='last'></td>
</tr>
</table>
英文:
The easiest way to achieve this is adding an ID to <i> element and trigger click on element selected by id.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('body').on('focusout', '.last', function() {
alert('clicked');
$('#add-task-button').find('.newTask').trigger('click');
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><i id="add-task-button" class="bi bi-plus-circle-fill fa-1x icon-green newTask">Add Task</i></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text' class='last'></td>
</tr>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论