Блог

Главная - Вопросы по программированию - jQuery ‘text’ не работает

jQuery ‘text’ не работает

#javascript #jquery #twitter-bootstrap

#javascript #jquery #twitter-bootstrap

Вопрос:

 var $insertSuccessMessage = $('#insertSuccessMessage');
var $successPopup = $('#successPopup');
var $successSpan = $('#successSpan');

У меня есть тег div:

 <div id="insertSuccessMessage"></div>

Когда пользователь успешно вводит значение в поле ввода, я пытаюсь добиться появления всплывающего окна «success» под этим тегом div следующим образом:

 $insertSuccessMessage.append('<div class="alert alert-success alert-dismissible" id='successPopup' role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">amp;times;</span></button><span id="successSpan"></span></div>');
$successSpan.text("Successfully inserted value!");

Сторона: я использую Bootstrap.

Таким successPopup образом, появится, но текст не будет; текст не вставляется между тегами span.

Комментарии:

1. Вам нужно предоставить нам значительно больше кода, чтобы помочь вам с этой проблемой. Насколько я могу судить, successSpan не определен.

2. У вас ошибка в вашем коде, смешивающая одинарные и двойные кавычки. В вашей строке, начинающейся с $insertSuccessMessage.append... части id='successPopup' , должно быть написано в двойных кавычках. С помощью одинарных кавычек он экранирует строку.

Ответ №1:

Вы не определяете $successSpan . Вам нужно использовать $('#successSpan') для доступа к элементу по идентификатору

Обновление после редактирования:

Вы определяете $successSpan слишком рано. Когда вы определяете его, #successSpan элемент еще не существует.

Комментарии:

1. Правильно, но как он будет получать доступ к insertSuccessMessage в первую очередь?

2. Да, вы правы. Я добавил переменную $successSpan после .append строки. Спасибо.

Ответ №2:

 $insertSuccessMessage.append('
<div class="alert alert-success alert-dismissible" id='successPopup' role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">amp;times;</span></button><span id="successSpan">
</span></div>');
$successSpan.text("Successfully inserted value!");

вы разрываете строку, используя неэкранированный апостроф при определении атрибута id в successPopup.

 <div class="alert alert-success alert-dismissible" id='successPopup' role="alert">

должно быть

 <div class="alert alert-success alert-dismissible" id="successPopup" role="alert">

или в качестве альтернативы

 <div class="alert alert-success alert-dismissible" id='successPopup' role="alert">

Ответ №3:

#successSpan Существует ли элемент в DOM , прежде чем вы попытаетесь обратиться к нему? После добавления #successSpan к #insertSuccessMessage вы должны иметь возможность ссылаться на #successSpan это так:

 $('#successSpan').text("Successfully inserted value!");

Комментарии:

1. Да, это была моя проблема. Я имел в виду элемент до того, как он существовал в DOM. Теперь это исправлено и работает.

Ответ №4:

Попробуйте эту модификацию

 $insertSuccessMessage.append('<div class="alert alert-success alert-dismissible" id="successPopup" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">amp;times;</span></button><span id="successSpan"></span></div>');
$('#successSpan').text("Successfully inserted value!");

Ответ №5:

Используйте строковый селектор.

Попробуйте это:

 $('#insertSuccessMessage').append('<div class="alert alert-success alert-dismissible" id="successPopup" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">amp;times;</span></button><span id="successSpan"></span></div>');
$('#successSpan').html("Successfully inserted value!");

Здесь все работает нормально!

Метки: