попробуйте реализовать твитоподобный ответ на сообщение в примере Flask MiniTwit

Question

Я попытался реализовать твиттер-подобный ответ на сообщение в примере Flask MiniTwit, но теперь я не могу заставить кнопку «ответить» для каждого сообщения работать, как?

<ul class=messages>
{% for message in messages %}
<li><img src="{{ g.get_user(message.author_id).email|gravatar(size=48)}}"><p>
<strong><a href="{{ url_for('user_timeline', username=message.author_id)
}}">{{ message.author_id }}</a></strong>
{{ message.text }}
<small>&mdash; {{ message.pub_date|datetimeformat }}</small>
{% if g.user %}
<script type=text/javascript>
 $(function () {
  messageid = $('a#reply').data('messageid');
  $('a#reply').bind('click', function () {
  $.getJSON($SCRIPT_ROOT + '/_get_replies', {
    messageid: $('#reply').data('messageid'),
    userid: $('#reply').data('userid')
  }, function (data) {
 $('div#' + messageid).text(data.result)
});
return false;
});
});
</script>
<p  align=right style='text-align:right'><small>
<a href=# data-userid="{{g.user._id}}" data-messageid="{{message._id}}" id="reply">
Reply
</a></small></p>
<p><div id="{{message._id}}">I TRY TO PUT REPLIES HERE!</div></p>
{% endif %}
{% else %}
<li><em>There's no message so far.</em>
{% endfor %}
</ul>

, прежде чем нажать «ответить»Кнопка Моя страница выглядит так:

После нажатия любой из кнопок «Ответить», страница выглядит так:

Answer 1

Вы используете text при возврате HTML - HTML-код экранирован, что приводит к вашей проблеме - используйте вместо этого html:

// Change
$('div#' + messageid).text(data.result)
// to
$('div#' + messageid).html(data.result)
                      ^^^^

Несколько других моментов для рассмотрения:

1. Каждый идентификатор должен существовать только один раз в документе. Наличие нескольких ссылок с идентификатором «reply» приведет к проблемам позже. Оставьте это полностью или измените его на класс.
2. Используйте delegate (on, если вы используете jQuery 1.7 или выше) и привязывайте только один раз к корневому элементу (в вашем случае ul.messages). Это уменьшает количество обработчиков событий на странице до 1 - и приведет к значительному увеличению производительности при большом количестве сообщений.
3. Кэшируйте свои селекторы, чтобы повысить производительность еще больше - не нужно заходить в DOM 3 раза, когда у вас есть вся информация на первом проходе.