Javascript 外部jquery.click（）事件有时不起作用

我正在开发一个简单的jQuery时间选择器插件，它可以在旧的引导和jQuery上工作，该插件的jQuery位于sites.js中，通过将aclass放在div上调用，如下所示：

这成功地到达了下面的jQuery，但当我单击按钮时，它们有时只运行分配给它们的函数

$。每个$。时间选择器，函数{ var div=$this； 变量$timepickerlayout=$[ , ' ', ' ', ' ', ' ', “ : ”， ' ', ' ', ' ', ' ', ]。加入\n； div.append$timepickerlayout； $'body'.finddiv.findhour-up.clickfunction{ console.logclick-hup； }; $'body'.finddiv.findhour-down.clickfunction{ console.log单击hdown； }; $'body'.finddiv.findmin-up.clickfunction{ console.logclick mup； }; $'body'.finddiv.findmin-down.clickfunction{ console.log单击mdown； }; }; 任何关于为什么会发生这种情况的想法都将不胜感激， 非常感谢在advanced中，Jaidon Rymer将id属性移动到标记并使id属性唯一一种方法是使用索引，就像我在小提琴上做的那样

---

我相信的原因是，您将事件处理程序附加到斜体HTML上，而斜体HTML不是实际的按钮。您应该始终将其连接到按钮本身，即，算作按钮的最大物件

您还可以动态创建这些项目，因此不建议使用.click。你应该使用.on'click'，fn

我对您在此处提供的代码进行了一些更改：

HTML

JQUERY

---

Satpal解决了这一问题。只有Id需要更改为类，因为所有其他解决方案都以某种方式更改了基本功能，xyz的答案更改了基本功能，以后在我的脚本中很难使用，因为它需要自引用和完全动态，迪安·米汉的回答改变了布局，所以不是我想做的

---

我将在此更新此时间选择器项目的进度，HTML中的id必须唯一。使用类名而不是id。同时替换为div.find.min down。单击。。。从$'body.finddiv.findmin向下。点击…这是我的业余错误！！！谢谢，现在它工作得很好！

$.each($(".time-picker"), function (index) {
var div = $(this);
var $timepickerlayout = $([
    '<div class="row-fluid">',
    '    <div class="input-group">',
    '        <input class="form-control" type="text" style="margin-bottom:0; width:26px" id="hour">',
    '        <a class="btn btn-default" style="margin-bottom:0" href="#"  id="hour-up-' + index +'"><i class="fa fa-chevron-up"></i></a>',
    '        <a class="btn btn-default" style="margin-bottom:0" href="#" id="hour-down-' + index +'"><i class="fa fa-chevron-down"></i></a>',
    '        &nbsp : &nbsp',
    '        <input class="form-control" type="text" style="margin-bottom:0; width:26px" id="min">',
    '        <a class="btn btn-default" style="margin-bottom:0" href="#" id="min-up-' + index +'"><i class="fa fa-chevron-up"></i></a>',
    '        <a class="btn btn-default" style="margin-bottom:0" href="#" id="min-down-' + index +'"><i class="fa fa-chevron-down"></i></a>',
    '    </div>',
    '</div>'
  ].join("\n"));
  div.append($timepickerlayout);
  $('body').find(div).find("#hour-up-" + index).click(function () {
    console.log("click hup" + index);
  });
  $('body').find(div).find("#hour-down-" + index).click(function () {
    console.log("click hdown" + index);
  });
  $('body').find(div).find("#min-up-" + index).click(function () {
    console.log("click mup" + index);
  });
  $('body').find(div).find("#min-down-" + index).click(function () {
    console.log("click mdown" + index);
  });
});

<div class="time-picker"></div>

$.each($(".time-picker"), function () {
    $(this).html('<div class="row-fluid"> <div class="input-group"> <input class="form-control" type="text" style="margin-bottom:0; width:26px" class="hour"> <a class="btn btn-default hour-up" style="margin-bottom:0" href="#"><i class="fa fa-chevron-up">up</i></a> <a class="btn btn-default hour-down" style="margin-bottom:0" href="#"><i class="fa fa-chevron-down" class="">down</i></a> &nbsp; : &nbsp; <input class="form-control" type="text" style="margin-bottom:0; width:26px" class="min"> <a class="btn btn-default min-up" style="margin-bottom:0" href="#"><i class="fa fa-chevron-up">Min Up</i></a> <a class="btn btn-default min-down" style="margin-bottom:0" href="#"><i class="fa fa-chevron-down">Min Down</i></a> </div> </div>');
});

//Moves these outside of creater code
$(".hour-up").on('click', function () {
    alert("click hup");
});

$(".hour-down").click(function () {
    alert("click hdown");
});

$(".min-up").click(function () {
    alert("click mup");
});

$(".min-down").click(function () {
    alert("click mdown");
});