Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.11.2022, 12:20
Новичок на форуме
Отправить личное сообщение для Димол Посмотреть профиль Найти все сообщения от Димол
 
Регистрация: 05.04.2020
Сообщений: 8

Не работает скрипт вместе с ajax
Мне подсказали скрипт, который под постом выводит форму для ответа
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    a.answ{
    cursor: pointer;
    font-weight: bold;
    color: navy;
    }
    a.answ:hover{
    color: crimson;
    }
    .hid{
    display: none;
    }
    </style>
   <script>
   onload = function(){
   [...document.querySelectorAll('.question')].forEach(function(z){
   z.addEventListener('click', function(e){
   elem = e.target;
   if(elem.className == 'answ'){
   document.querySelector('[name="question_number"]')?.closest('p').querySelector('a').classList.remove('hid');
   document.querySelector('[name="question_number"]')?.closest('form').remove();
   const cln = document.querySelector('#tpl').content.cloneNode(true),
         whereTo = elem.closest('p');
         
         cln.querySelector('[name="question_number"]').value = elem.closest('div').querySelector('p').id;
         whereTo.append(cln);
         elem.classList.add('hid');
   }
   });
   });
   }
   </script>
  </head>
  <body>
    <template id="tpl">
      <form>
       <textarea name="message"></textarea>
       <input type="hidden" name="question_number" value="" />
       <input type="submit" name="submit_otv" value="Отправить" />
      </form>
    </template>  
    <div class="question">
    <p id="q1">Вопрос 1</p>
    <p><a class="answ">Ответ</a></p>
    </div>
    <div class="question">
    <p id="q2">Вопрос 2</p>
    <p><a class="answ">Ответ</a></p>
    </div>
    <div class="question">
    <p id="q3">Вопрос 3</p>
    <p><a class="answ">Ответ</a></p>
    </div>
    <div class="question">
    <p id="q4">Вопрос 4</p>
    <p><a class="answ">Ответ</a></p>
    </div>
    <div class="question">
    <p id="q5">Вопрос 5</p>
    <p><a class="answ">Ответ</a></p>
    </div>
  </body>
</html>

Само по себе всё работает. Смотрю на стр. aj_chat.php
Но если я загружаю страницу с помощью ajax, то при клике форма не появляется.

<a href="#" chat="999"> ССЫЛКА</a>

<div id="men"></div>
<script>
$(function(){
$('a[chat]').click(function(e){
e.preventDefault();
var id_chat = $(this).attr('chat');
$.ajax({
type: "POST",
url: "aj_chat.php",
data: "id_chat="+id_chat,
cache: false,
success: function(responce){

$('#men').html(responce);
}
});
});
})
</script>

Как все это реализовать?
P.S. Не держусь именно за этот скрипт, если кто предложи аналогичный, буду крайне признателен.

Последний раз редактировалось Димол, 12.11.2022 в 12:47.
Ответить с цитированием
  #2 (permalink)  
Старый 12.11.2022, 12:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,144

Димол,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 17.11.2022, 17:40
Новичок на форуме
Отправить личное сообщение для Димол Посмотреть профиль Найти все сообщения от Димол
 
Регистрация: 05.04.2020
Сообщений: 8

Похоже, что решения здесь никто не знает?
Ответить с цитированием
  #4 (permalink)  
Старый 17.11.2022, 20:37
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,765

Попробуйте так.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    a.answ{
    cursor: pointer;
    font-weight: bold;
    color: navy;
    }
    a.answ:hover{
    color: crimson;
    }
    .hid{
    display: none;
    }
    </style>
  </head>
  <body>
    <template id="tpl">
      <form>
       <textarea name="message"></textarea>
       <input type="hidden" name="question_number" value="" />
       <input type="submit" name="submit_otv" value="Отправить" />
      </form>
    </template> 
    <div class="question">
    <p id="q1">Вопрос 1</p>
    <p><a class="answ">Ответ</a></p>
    </div>
    <div class="question">
    <p id="q2">Вопрос 2</p>
    <p><a class="answ">Ответ</a></p>
    </div>
    <div class="question">
    <p id="q3">Вопрос 3</p>
    <p><a class="answ">Ответ</a></p>
    </div>
    <div class="question">
    <p id="q4">Вопрос 4</p>
    <p><a class="answ">Ответ</a></p>
    </div>
    <div class="question">
    <p id="q5">Вопрос 5</p>
    <p><a class="answ">Ответ</a></p>
    </div>
   <script>
   [...document.querySelectorAll('.question')].forEach(function(z){
   z.addEventListener('click', function(e){
   elem = e.target;
   if(elem.className == 'answ'){
   document.querySelector('[name="question_number"]')?.closest('p').querySelector('a').classList.remove('hid');
   document.querySelector('[name="question_number"]')?.closest('form').remove();
   const cln = document.querySelector('#tpl').content.cloneNode(true),
         whereTo = elem.closest('p');
          
         cln.querySelector('[name="question_number"]').value = elem.closest('div').querySelector('p').id;
         whereTo.append(cln);
         elem.classList.add('hid');
   }
   });
   });
   </script>
  </body>
</html>


Может быть и сработает. Надо посмотреть, что там jquery сделает со скриптом при вставке $('#men').html(responce);
Ответить с цитированием
  #5 (permalink)  
Старый 21.11.2022, 13:32
Новичок на форуме
Отправить личное сообщение для Димол Посмотреть профиль Найти все сообщения от Димол
 
Регистрация: 05.04.2020
Сообщений: 8

Спасибо. Сработало, правда проблема потянулась дальше, уже с отправкой формы. Но это, наверное, сделаю отдельную тему.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не работает подключенный скрипт?? ivt22 Элементы интерфейса 1 04.01.2016 10:59
Не работает ajax при OnClick по ссылке firefox govorusha AJAX и COMET 8 06.06.2015 14:34
Скрипт работает на локалки, но не работает на хостинге. Artem88 Общие вопросы Javascript 4 15.11.2012 00:59
скрипт работает в IE не работает в Opera!!! Ikram Opera, Safari и др. 3 29.10.2010 10:04
Не работает jQuery меню с AJAX eugene1986 jQuery 0 08.07.2010 18:49