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

这都在

$（document.ready（function（）{}）中我应该做的是，当我点击医生下方的按钮时，应该转到表格并填写医生的姓名和专业。。。但似乎出于某种原因它不起作用。。。这是代码中其他单击函数的副本，但它们似乎工作正常

HTML格式：


埃斯科拉是一个特殊的人
如果在事件发生后创建按钮，则可能会出现问题。因此，请使用代理版本的单击：

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

最好在祖先div上添加一个id：

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

”按钮点击正常。这是一把小提琴，显示了它的功能：


单击中
console.log（“test”）
行之前的代码肯定有问题。我将使用调试器来帮助您。
如果您将事件绑定到父元素，并按子元素进行筛选，则可以侦听添加的任何新元素，而不管添加了多少新元素


新增

const$addNew=$（'.js add new'）
const$container=$（“.container”）
让计数=0
$addNew.on（“单击”，（）=>{
计数+=1
$container.append(`
日志me${count}
`)
})
$container.on（“单击”，“按钮”，“事件）=>{
console.log（event.currentTarget）
})

工作示例：
您必须添加元素并为元素注册事件。这是你用的小提琴


您的示例HTML

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



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

})

});

$（文档）.ready（函数（）{
var sampleString=“”；
var medico=[{'specialidade'：'speciality 0'，'nome'：'Doctor 0'}，{'specialidade'：'speciality 1'，'nome'：'Doctor 1'}，{'specialidade'：'speciality 2'，'nome'：'Doctor 2'}]
对于（变量i=0；i<3；i++）{
var doctorData=medico[i]；
$（'get#u medicos'）。追加(
'' +
'' +
'' +
'' + 
'' +
“+medico[i].nome+”+
“”+medico[i]。特别是dade+”
”+
“Marcar consulta”+i+“+
'' +
'' +
''
);
};
$（'get#u medicos'）。on（'click'，'a'，函数（事件）{
var elementClicked=event.target；
var doctorEspecialiadade=$（elementClicked）.data（'doctor-specialadade'）；
var doctorName=$（elementClicked）.data（'doctor-nome'）；
$（'marcacao consulta'）。查找（'specialidade marcacao option[id=“default”]”）。文本（doctoresspecialidade）；
$（'marcacao consulta'）。查找（'corpo clinico option[id=“default”]”）。文本（doctorName）；
})
});
他试图将元素添加到dom中，您发布的示例没有复制该元素。@SachinVishwakarma因为我没有任何要附加的内容，$（“#get_medicos”）不存在要附加的内容。#get_medicos是生成包含文档信息的div的部分，另一个答案是，您需要使用事件委派，因为元素是在加载DOM后创建的-HTML中的
#get_medicos
到底在哪里？是从DOM中提取文档信息后生成文档信息的部分dB@andremonteiro1996点击的代理版本有效吗？不，仍然无效，这真的让我很头疼，为什么这个，看起来不管用，也许是因为文件的缘故？你能详细说明一下吗？你用相同的id做3个“附加”，将侦听器附加到
#get_medicos
应该管用，但看起来你有多个具有相同id的div。因为只有一个给定名称的id应该存在，您的事件将仅绑定到它找到的第一个事件。如果您更新
#marcar
以使用类或数据集，您可能会有更好的运气。for循环工作正常，因为每个医生都有自己的页面使用ID。这项工作完成了一半。它能够滚动到表单并填写医生的姓名，只是，它没有用正确的名称填写姓名。始终搜索生成卡片的最后一个值原始帖子是关于点击事件的。这是工作了。你必须在逻辑上下功夫才能得到所需的细节。但是，如果您可以共享用于查找医生信息的逻辑，那么我可以进一步帮助您。假定的逻辑是索引生成一个包含3名随机医生的部分，您可以在其中执行搜索，并通过单击按钮与首选医生预约。这将带您进入一张表格，填写按下按钮的医生的姓名和专业。还有，什么是当前不起作用的？当您单击“预约”按钮（根据问题生成）时，是否传播了正确的医生信息？您需要共享当前编写的扩展逻辑代码。不用担心，您不需要处理索引逻辑，您可以通过事件传递数据。检查这个提琴，我已经通过数据属性传递了医生信息和姓名，可以在点击事件中使用。观察中的数据属性
$(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); 

})

});