javascript - 按钮单击功能在 jQuery 中不起作用

Question

因此，我正在为一家医疗诊所开发一个网站，他们要求我在每位医生下方添加一个按钮来进行预约。

这是我为医生部分准备的

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>'
    );
}

点击功能的then代码(不起作用):

$('#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');
});

这一切都在 $(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>

Answer 1

您必须添加元素并为该元素注册事件。这是适合您的 fiddle

https://jsfiddle.net/0q3kpyfv/

您的示例 HTML

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

示例 jquery 代码请注意，我已将 data-val 属性添加到添加的 anchor 标记中，这将帮助您获取信息并根据单击的按钮执行逻辑。您可以将动态数据传递给 data-val 属性并在点击事件中使用它。

$(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); 

})

});