Вход

Просмотр полной версии : Не работает скрипт вместе с ajax

Димол
12.11.2022, 12:20
Мне подсказали скрипт, который под постом выводит форму для ответа

<!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.remo ve('hid');
document.querySelector('[name="question_number"]')?.closest('form').remove();
const cln = document.querySelector('#tpl').content.cloneNode(t rue),
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:33
Димол,
Пожалуйста, отформатируйте свой код!

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


... минимальный код страницы с вашей проблемой


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Димол
17.11.2022, 17:40
Похоже, что решения здесь никто не знает?
voraa
17.11.2022, 20:37
Попробуйте так.
<!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.remo ve('hid');
document.querySelector('[name="question_number"]')?.closest('form').remove();
const cln = document.querySelector('#tpl').content.cloneNode(t rue),
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);
Димол
21.11.2022, 13:32
Спасибо. Сработало, правда проблема потянулась дальше, уже с отправкой формы. Но это, наверное, сделаю отдельную тему.