У меня есть функция, которая при выделении мыши или наведении мыши подсвечивает ячейки или в них вносятся изменения.
Все изменения в ячейках работают хорошо, за исключением случаев, когда я пытаюсь очистить текст в промежутке внутри ячейки (.number_searches), используя функции jquery .html .text или .empty. Это приводит к двойному щелчку кода (один для mousedown, другой для наведения мыши)
Есть ли способ очистить диапазон ".number_searches", не вызывая события mousedown и mouseover (2 клика)?
Следующая строка в функции запускаемого клика (.dosearches) вызывает проблему:
area.find('.number_searches').html(" ");
$(function() {
let isMouseDown = false;
let hasBeenClicked = false;
let isHighlighted;
$("#tablegrid").on('mousedown', 'td.nohighlight', function() {
isMouseDown = true;
$(this).toggleClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
if (hasBeenClicked === false) {
$(this).find('.dosearches').trigger('click');
hasBeenClicked = true;
}
return false; // prevent text selection
})
$("#tablegrid").on('mouseover', 'td.nohighlight', function() {
if (isMouseDown) {
$(this).toggleClass("highlighted");
if (hasBeenClicked === false) {
$(this).find('.dosearches').trigger('click');
hasBeenClicked = true;
}
}
})
// May or may not need this part depending on your app design
$("#tablegrid").on('mouseout', 'td.nohighlight', function() {
hasBeenClicked = false;
})
$("#tablegrid").bind('selectstart', 'td.nohighlight', function() {
return false;
})
$(document).mouseup(function() {
isMouseDown = false;
hasBeenClicked = false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="search_juris_cell" class="nohighlight">
<div class="search_checkbox_section">
<div class="dosearchescheckbox">
<input type="checkbox" name="dosearches" class="dosearches">
</div>
<span class="number_searches">5 searches</span>
<div class="search_checkbox_types">
</div>
</div>
</td>
</tr>
</table>