我有一个正在使用实时搜索功能的文本框。测试 HTML 效果很好,单击它就会像应有的那样添加到日志中。问题是,一旦我使用搜索框并且新的“相同”代码被附加到 #tag-result 中,单击功能就会停止工作。我使用此代码的相同变体来做其他事情,并且它始终工作完美......除了在这种情况下。
例如,这个确切的代码,将“标签”关系替换为“用户”,效果非常好。
// .blur was missed in original edit of this post...
$('#txttagSearch').blur(function() {
$(this).val('');
$('#tag-search-results').hide();
})
// remove above code and replace with the following
$(document).mouseup(function(e) {
$('#txtTagSearch').val('');
$('#tag-search-results').hide();
})
// now clicks register and search results hide when they should.
<div class="form-floating">
<input type="text" class="form-control" id="txtTagSearch" name="txtTagSearch" placeholder="Search to Add Tags" autocomplete="off">
<label for="txtTagSearch">Search to Add Tags</label>
</div>
<div class="tag-wrapper">
<div id="tag-search-results">
<ul id="tag-result">
<li class="tag-search-click 5">leather</li> /* this click works */
</ul>
</div>
<div class="row gx-2 mt-3">
<div class="col" id="tag-display">
<div class="tag" style="background-color: #000;">sunglasses</div>
</div>
</div>
</div>
$('#txtTagSearch').keyup(function() {
liveSearchTag($(this).val())
$('#tag-search-results').show();
})
$('#model-tag-results #tag-result').mousedown(function(e) {
e.preventDefault();
})
function liveSearchTag(keyword) {
$.ajax({
url: 'server/tag-search.php',
type: 'GET',
data: { keyword: keyword },
dataType: 'json',
success: function(result) {
const divTagResult = $('#tag-search-results #tag-result');
let html = '';
if (result !== null) {
if (result.length > 0) {
$.each(result, function(index, item) {
html += '<li class="tag-search-click ' + item['id'] + '">' + item['tag'] + '</li>' // these clicks do not detect?
})
} else {
let html = '<li style="padding: 10px;">NO RESULT FOUND</li>';
}
} else {
let html = '<li style="padding: 10px;">NO RESULT FOUND</li>';
}
divTagResult.html(html);
}
})
}
$('#tag-search-results').on('click','.tag-search-click',function() {
console.log('test');
var tagID = $(this).attr('class').replace('tag-search-click ','');
$.ajax({
url: 'server/tag-result.php',
type: 'GET',
data: { code: tagID },
dataType: 'json',
success: function(data) {
$('#tag-display').append('test');
$('#txtTagSearch').val('');
$('#txtTagSearch').blur();
$('#tag-search-results').hide();
}
})
})
尝试使用多次点击方法...
$('#tag-search-results').on('click','.tag-search-click',function() {
$(document).on('click','.tag-search-click',function() {
$('.tag-search-click').(function() {
我在原帖中遗漏了一些
jQuery
。点击时的 .hide()
并不是导致点击未注册的原因。 .blur()
和 .hide()
导致了问题。下面是我错过的错误代码,以及我现在用来隐藏和清除搜索结果的代码。现在一切都很顺利。希望这会有所帮助。谢谢弗拉兹!!
// .blur was missed in original edit of this post...
$('#txttagSearch').blur(function() {
$(this).val('');
$('#tag-search-results').hide();
})
// remove above code and replace with the following
$(document).mouseup(function(e) {
$('#txtTagSearch').val('');
$('#tag-search-results').hide();
})
// now clicks register and search results hide when they should.