按钮单击功能在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>'
    );
}

然后是click函数的代码(不起作用)：

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

您必须添加元素并为元素注册事件。这是一把适合你的小提琴

https://jsfiddle.net/0q3kpyfv/

您的示例HTML

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

示例jquery代码注意，我已经向添加的锚标记添加了data-val属性，它将帮助您获取信息并根据所单击的按钮执行逻辑。您可以将动态数据传递给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); 

})

});

Answer 2

如果您在事件之后创建按钮，您可能会遇到问题，因此，请使用click的委托版本：

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

最好将id放在祖先div上：

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

还有一件事，用这个循环，你会有更多的时间在你的html中使用相同的id？？这可不好。

所以你必须重建你的程序logic...and绑定事件与正确的按钮(使用一个公共的类)，它将比一个id更好

Answer 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