#javascript #jquery
#javascript #jquery
Вопрос:
У меня есть
<input type="text" id = "addressbox" size="30" onkeyup="showResult(this.value)">
<ul class="livesearch" id="livesearch" style="border: 1px solid rgb(165, 172, 178);">
<li><a href="#">ADDRESS1</a></li><br>
<li><a href="#">ADDRESS 2</a></li><br>
</ul>
и для javascript
$('.livesearch').click(function() {
var value = $(this).text();
var TheTextBox = document.getElementById("addressbox");
TheTextBox.value = value;
});
Когда я нажимаю на ссылку, она выбирает все адреса внутри <ul>
, а не тот, который я нажимаю, например, я нажимаю адрес 1, но в текстовом поле отображаются адреса 1 и адрес2….что я делаю не так?
Комментарии:
1. Изменить
$('.livesearch')
на$('.livesearch a')
2. это приводит к тому, что он вообще не работает, я пытался это сделать
3. @k_schultz Вы создаете
ul
динамический элемент?4. попробуйте использовать только Jquery или только JS… Более доступный и поддерживаемый. Здесь у вас 50/50
5. @k_schultz Пожалуйста, посмотрите на мой ответ и совет не смешивать чистый JS и jQuery.
Ответ №1:
Зачем вы вообще смешиваете чистый JavaScript и jQuery? Придерживайтесь только одного. У меня сильное ощущение, что браузер переходит по ссылке. Используйте либо return false
или event.preventDefault()
, чтобы остановить переход браузера по ссылке.
Кроме того, пожалуйста, не используйте <br />
без необходимости. Поскольку вы выполняете динамическое обновление элементов, используйте делегирование событий следующим образом:
$('.livesearch').on("click", "a", function(e) {
e.preventDefault();
$("#addressbox").val($(this).text());
});
* {margin: 0; padding: 0; list-style: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id = "addressbox" size="30" onkeyup="showResult(this.value)">
<ul class="livesearch" id="livesearch" style="border: 1px solid rgb(165, 172, 178);">
<li><a href="#">ADDRESS1</a></li>
<li><a href="#">ADDRESS 2</a></li>
</ul>
Комментарии:
1. Когда я добавляю a в $(‘.livesearch a’).click(function(e) { это нарушает код и больше не работает при нажатии
2. @k_schultz Выглядит как большая проблема? Но хорошо ли это работает во фрагменте? Как вы хотели?
3. Я создаю список динамически, будет ли в этом проблема?
Ответ №2:
попробуйте сделать это так:
$('.livesearch a').click(function(e) {
e.preventDefault();
var value = $(this).html();
var TheTextBox = document.getElementById("addressbox");
TheTextBox.value = value;
});
Ответ №3:
Вы можете сделать это, используя 100% jQuery:
$('.livesearch a').click(function() {
var value = $(this).text();
$("#addressbox").val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="addressbox" size="30" onkeyup="showResult(this.value)">
<ul class="livesearch" id="livesearch" style="border: 1px solid rgb(165, 172, 178);">
<li><a href="#">ADDRESS1</a>
</li>
<br>
<li><a href="#">ADDRESS 2</a>
</li>
<br>
</ul>
Ответ №4:
Это потому, что ваше «это» в :
var value = $(this).text();
ссылается на тег с классом ‘.livestream’, а именно на весь ваш ‘ul’.
Вы должны заменить ‘this’ на соответствующий селектор.