Не работает js код (возможно из-за конфликта с jquery)

@ГеоргийТ · Регистрация: 06.08.2018

Студворк — интернет-сервис помощи студентам

у меня есть js код который воспроизводит аудио по нажатию на кнопку, и аякс запрос написанный на jquery. система такая, что при вводе текста пользователю динамически выводится текст перевода + возможность прослушать аудио. так вот проблема в том, что код воспроизведения не работает, но он не работает именно с аякс запросом, потому, что я проверял вывод по нажатию на кнопку и так он воспроизводил. я подумал может из-за конфликта jquery и js??? помогите разобраться!!!!!((( вот код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    let audbtn = document.querySelectorAll('i');
    let aud = document.querySelectorAll('audio');
/*цикл для кнопки*/
for(let i = 0; i<aud.length;i++){
    audbtn[i].onclick = (function(i){
        return function() {
            if (~playing) {
                aud[playing].pause();
                aud[playing].currentTime = 0;
            }
            aud[i].play();
            playing = i;
        }
    })(i);
}

вот аякс запрос:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
  let timeout;
  let xhr;
  $('#text').on('input', function() {
     let t = $(this).val();
    clearTimeout(timeout);
    if (xhr) {
      xhr.abort();
    }
    timeout = setTimeout(function() {
      xhr = $.ajax({
        url: 'php/result.php',
        type: 'post',
        data: 'text=' + t,
        dataType: 'html',
        success: function(res) {
          $('#result').html(res);
        }
      })
    }, 1500);
  })
})

@ГеоргийТ · 10.02.2020, 16:10 **[ТС]**

есть js код который воспроизводит по клику на тег аудио, и аякс запрос который подгружает данные на oninput. проблема в том, что когда аякс подгружает данные, клик не работает и аудио не воспроизводится. а без аякс запроса работает(((

код клика:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*цикл для кнопки*/
for(let i = 0; i<aud.length;i++)
{
    audbtn[i].onclick = (function(i){
        alert("A");
        return function() {
            if (~playing) {
                aud[playing].pause();
                aud[playing].currentTime = 0;
            }
            aud[i].play();
            playing = i;
        }
    })(i);
}

код аякс:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
  let timeout;
  let xhr;
  $('#text').on('input', function() {
     let t = $(this).val();
    clearTimeout(timeout);
    if (xhr) {
      xhr.abort();
    }
    timeout = setTimeout(function() {
      xhr = $.ajax({
        url: 'php/result.php',
        type: 'post',
        data: 'text=' + t,
        dataType: 'html',
        success: function(res) {
          $('#result').html(res);
        }
      })
    }, 1500);
  })
})

ПОМОГИТЕ(((((

@fixeri · 10.02.2020, 18:50

Какую разметку возвращает ajax?.

@ГеоргийТ · 11.02.2020, 23:49 **[ТС]**

php код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
require_once 'db.php';
    $search_q=$_POST['text'];
    $search_q = trim($search_q);
    $search_q = strip_tags($search_q);
    $q=mysqli_query($connection, "SELECT * FROM `vocabulary` WHERE `text` LIKE '$search_q%'");
        if(mysqli_num_rows($q)<=0 && !empty($search_q)){
            echo '<div class="text-search" id="error"><div class="block-search"><p id="visible">по запросу "'.$search_q.'" ничего не найдено</p></div></div>';
        }
        else{
            while ($itog = mysqli_fetch_assoc($q)){
                if(!empty($search_q)){
                        echo '<div class="text-search"><div class="block-search"><p id="visible">'.$itog['text']?>
                    <?php 
                        if($itog['audio']!=NULL){
                            ?>
                        <i id="aud_play" class="fa fa-volume-up" aria-hidden="true">
                            <audio id="audio" controls preload="none">
                                <source src="audio/<?php echo $itog['audio'];?>">
                            </audio>
                        </i>
                    <?php }?>
                        
                    <?
                    echo '</div></div></p>';
                }
            }
        }
        mysqli_free_result($q);
?>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 31.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@fixeri 380 / 230 / 115 Регистрация: 22.11.2016 Сообщений: 379
	10.02.2020, 18:50
	Какую разметку возвращает ajax?. 0