Функция нажатия кнопки не работает в jQuery

ProgramBox

Функция нажатия кнопки не работает в jQuery

Post author:admin
Запись опубликована:11 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Итак, я разрабатываю веб-сайт для медицинской клиники, и меня попросили добавить кнопку под каждым врачом, чтобы записаться на прием.

это то, что у меня есть для раздела врачей

 for (var i = 0; i < 3; i  ) {
    $('#get_medicos').append(
        '<div class="col-md-3 dummy">'  
            '<div class="text-box">'  
                '<img src="assets/images/corpo-clinico/'   medico[i].ficheiro   '" alt="" class="img-responsive"/>'  
                '<div class="clearfix"></div>'   
                '<div class="text-box white padding-3">'  
                    '<h5 class="less-mar1 text-blue">'   medico[i].nome  '</h5>'  
                    '<p>'   medico[i].especialidade   '</p>'  
                    '<a id="marcar" type="button" class="btn btn-primary">Marcar consulta</a>'  
                '</div>'  
            '</div>'  
        '</div>'
    );
}

Затем код для функции щелчка (это не работает):

 $('#marcar').click(function() {
    var offset = $('#marcacao').offset();
    $('html, body').animate({
        scrollTop: offset.top-100,
        scrollLeft: offset.left
    }, 1000);
    $('#marcacao-consulta').find('#especialidade-marcacao option[id="default"]').text(medico[i].especialidade);
    $('#marcacao-consulta').find('#corpo-clinico option[id="default"]').text(medico[i].nome);
    console.log('test');
});

Это все внутри a $(document).ready(function() {}); , и что должно быть сделано, когда я нажимаю эту кнопку под доктором, должен перейти к форме и заполнить имя и специальность врача… но, похоже, по какой-то причине это не работает… это копия других функций щелчка в коде, но они, похоже, работают нормально.

HTML-форма:

 <div id="marcacao-consulta" data-target="#marcacao-consulta">
    <div class="row">
        <div class="col-md-6 col-lg-6 col-sm-12">
            <div class="section">
                <label class="field select prepend-icon">
                    <select id="especialidade-marcacao" class="gui-input">
                        <option id="especialiade-default" value="default">Escolha a especialidade</option>
                        <?
                                                                        $query = $dbHandle->prepare("
                                                                            SELECT `especialidade` 
                                                                            FROM `especialidade`
                                                                            ORDER BY `especialidade` ASC
                                                                        ");
                                                                        $query->execute();
                                                                        if ($query->rowCount() > 0) {
                                                                            while ($row = $query->fetch(PDO::FETCH_ASSOC)) { ?>
                        <option value="<?=$row["especialidade"]; ?>"><?=$row["especialidade"]; ?></option>
                        <? }
                                                                        } else { ?>
                        <option value="">Nenhum resultado</option>
                        <? }
                                                                    ?>
                    </select>
                    <span class="field-icon"><i class="fas fa-heartbeat"></i></span>
                </label>
            </div>
        </div>
        <div class="col-md-6 col-lg-6 col-sm-12">
            <div class="section">
                <label class="field select prepend-icon">
                    <select id="corpo-clinico-marcacao" class="gui-input">
                        <option id="corpo-clinico-default" value="default">Escolha o médico</option>
                        <?
                                                                        $query = $dbHandle->prepare("
                                                                            SELECT `nome` 
                                                                            FROM `medico`
                                                                            ORDER BY `nome` ASC
                                                                        ");
                                                                        $query->execute();
                                                                        if ($query->rowCount() > 0) {
                                                                            while ($row = $query->fetch(PDO::FETCH_ASSOC)) { ?>
                        <option value="<?=$row["nome"]; ?>"><?=$row["nome"]; ?></option>
                        <? }
                                                                        } else { ?>
                        <option value="">Nenhum resultado</option>
                        <? }
                                                                    ?>
                    </select>
                    <span class="field-icon"><i class="fas fa-user-md"></i></span>
                </label>
            </div>
        </div>
        <div class="col-md-12 col-lg-12 col-sm-12">
            <div class="section">
                <label class="field prepend-icon">
                    <input id="nome" class="gui-input" type="text" placeholder="Nome Completo">
                    <span class="field-icon"><i class="fas fa-user"></i></span>
                </label>
            </div>
            <div class="section">
                <label class="field prepend-icon">
                    <input id="email" class="gui-input" type="text" placeholder="Endereço de correio eletrónico">
                    <span class="field-icon"><i class="fas fa-envelope"></i></span>
                </label>
            </div>
            <div class="section">
                <label class="field prepend-icon">
                    <input id="telefone" class="gui-input" type="text" placeholder="Telefone/Télemovel">
                    <span class="field-icon"><i class="fas fa-phone-square"></i></span>
                </label>
            </div>
            <div class="section">
                <label class="field prepend-icon">
                    <input id="tipo" class="gui-input" type="text" value="consulta" disabled>
                </label>
            </div>
        </div>
    </div>
</div>

1. Как уже указано в другом ответе, вам необходимо использовать делегирование событий, поскольку элемент создается после загрузки DOM — learn.jquery.com/events/event-delegation

2. Где #get_medicos вообще находится в HTML?

3. это раздел, в котором информация документа генерируется после извлечения из базы данных

4. @andremonteiro1996 работала ли тогда делегированная версия щелчка?

5. нет, все еще не работает, и это действительно беспокоит меня, почему

Ответ №1:

Вы должны добавить элемент и зарегистрировать событие для элемента. Вот скрипка, которая работает для вас

https://jsfiddle.net/0q3kpyfv/

Ваш образец HTML

 <div id="get_medicos">
</div>

Пример кода jquery
Обратите внимание, что я добавил атрибут data-val к добавленному тегу привязки, который поможет вам получить информацию и выполнить логику, основанную на том, какая кнопка нажата. вы можете передавать динамические данные в атрибут data-val и использовать его в событии click.

 $(document).ready(function() {

var sampleString = "";
var medico = [{'especialidade':'speciality 0','nome':'Doctor 0'},{'especialidade':'speciality 1','nome':'Doctor 1'},{'especialidade':'speciality 2','nome':'Doctor 2'}]

for (var i = 0; i < 3; i  ) {

var doctorData = medico[i];

    $('#get_medicos').append(
        '<div class="col-md-3 dummy">'  
            '<div class="text-box">'  
                '<img src="assets/images/corpo-clinico/'   medico[i].especialidade   '" alt="" class="img-responsive"/>'  
                '<div class="clearfix"></div>'   
                '<div class="text-box white padding-3">'  
                    '<h5 class="less-mar1 text-blue">'   medico[i].nome  '</h5>'  
                    '<p>'   medico[i].especialidade   '</p>'  
                    '<a id="marcar" data-doctor-especialiadade="' medico[i].especialidade '" data-doctor-nome="' medico[i].nome '" type="button" class="btn btn-primary">Marcar consulta' i '</a>'  
                '</div>'  
            '</div>'  
        '</div>'
    );
};



$('#get_medicos').on('click','a',function(event){

var elementClicked = event.target;
var doctorEspecialiadade = $(elementClicked).data('doctor-especialiadade');
var doctorName = $(elementClicked).data('doctor-nome');


 $('#marcacao-consulta').find('#especialidade-marcacao option[id="default"]').text(doctorEspecialiadade);
    $('#marcacao-consulta').find('#corpo-clinico option[id="default"]').text(doctorName); 

})

});

1. это сработало наполовину, удалось перейти к форме и заполнить имя врача, только это означает, что оно не заполняет имя правильным. всегда используется последнее значение сгенерированных карточек

2. Исходное сообщение было о событии щелчка. Сейчас это работает. вы должны поработать над логикой, чтобы получить необходимые детали. Однако, если вы можете поделиться логикой, которую вы используете для поиска информации о враче, я могу помочь вам в дальнейшем.

3. предполагаемая логика заключается в том, что индекс генерирует раздел с 3 случайными врачами, в котором вы можете выполнить поиск и записаться на прием к предпочтительному врачу, нажав на кнопку. это приведет вас к форме, в которой будут указаны имя и специальность врача, на карточке которого была нажата кнопка.

4. И что не работает в настоящее время? При нажатии кнопки MakeAppointment (которые генерируются в соответствии с вопросом) не распространяется правильная информация о враче? Вам необходимо предоставить общий доступ к расширенному логическому коду, который вы написали в настоящее время.

5. Не беспокойтесь, вам не нужно работать с индексной логикой, вы можете передавать данные через событие. проверьте эту скрипку, я передал информацию и имя врача через атрибут data, который можно использовать в событии click. обратите внимание на атрибут data в теге <a>, и он используется в событии click . jsfiddle.net/0q3kpyfv/2

Ответ №2:

если вы создаете кнопку после вашего события, у вас могут возникнуть проблемы, поэтому используйте делегированную версию click:

 $('div').on('click', 'a', (function()....

и лучше указать идентификатор в div-предке:

 '<div class="text-box white padding-3" id="mydiv"'
          :
 $('#mydiv').on('click', 'a', (function()....

другое дело, с циклом у вас будет тот же идентификатор больше времени в вашем html?? это бесполезно.

итак, вам придется перестроить логику вашей программы … и связать событие с правой кнопкой мыши (используйте общий класс), это будет лучше, чем идентификатор

1. сделал это, не видит, чтобы они работали, может быть, это из-за файлов?

2. Не могли бы вы подробнее рассказать об этом?

3. вы делаете 3 «добавления» с тем же идентификатором

4. Подключение слушателя к #get_medicos должно работать, но похоже, что у вас есть несколько divs с одинаковым идентификатором. Поскольку должен существовать только один идентификатор с заданным именем, ваше событие будет привязано только к первому, которое оно найдет. Если вы обновите #marcar , чтобы использовать класс или набор данных, вам, вероятно, повезет больше

5. Цикл for работает нормально, поскольку у каждого врача есть своя страница, работающая с идентификатором

Ответ №3:

Если вы привязываете событие к родительскому элементу и фильтруете по дочерним элементам, вы можете прослушивать любые новые добавленные элементы, независимо от того, сколько их.

 <div class="container"></div>

<button class="js-add-new">Add new</button>

 const $addNew = $('.js-add-new')
const $container = $('.container')
let count = 0

$addNew.on("click", () => {
  count  = 1
  $container.append(`
    <div>
      <button>log me ${count}</button>
    </div>
  `)
})

$container.on("click", "button", (event) => {
  console.log(event.currentTarget)
})

Рабочий пример: https://codepen.io/alexmccabe/pen/jOrXZxj?editors=1111

Ответ №4:

Нажатие кнопки работает. Вот скрипка, показывающая, что она работает:

https://jsfiddle.net/bradberkobien/qL4m10y6/3/

Должно быть, проблема с кодом, который находится перед console.log("test") строкой в щелчке. Я бы использовал отладчик, чтобы помочь вам в этом.

1. Он пытается добавить элемент в dom, пример, который вы опубликовали, не повторяет это.

2. @SachinVishwakarma поскольку мне не к чему было добавлять, $(‘#get_medicos’) не существует для добавления.

3. #get_medicos — это раздел, в котором создается div с информацией о документе