Question

我正在研究一个简单的jQuery时间选择器插件，它适用于旧的bootstrap和jQuery，插件的jquery位于sites.js中，并通过将div放在div上来调用：

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

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

$.each($(".time-picker"), function () {
    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="#"><i class="fa fa-chevron-up" id="hour-up"></i></a>',
        '        <a class="btn btn-default" style="margin-bottom:0" href="#"><i class="fa fa-chevron-down" id="hour-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="#"><i class="fa fa-chevron-up" id="min-up"></i></a>',
        '        <a class="btn btn-default" style="margin-bottom:0" href="#"><i class="fa fa-chevron-down" id="min-down"></i></a>',
        '    </div>',
        '</div>'
    ].join("\n"));
    div.append($timepickerlayout);
    $('body').find(div).find("#hour-up").click(function () {
        console.log("click hup");
    });
    $('body').find(div).find("#hour-down").click(function () {
        console.log("click hdown");
    });
    $('body').find(div).find("#min-up").click(function () {
        console.log("click mup");
    });
    $('body').find(div).find("#min-down").click(function () {
        console.log("click mdown");
    });
});

对于为什么会发生这种情况的任何想法都将不胜感激，非常感谢先进的，Jaidon Rymer

Answer 1

将id属性移至a标记并使id属性唯一（一种方法是使用索引，就像我在小提琴上所做的那样）。 Fiddle

$.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);
  });
});

Answer 2

Satpal解决了这个问题。由于所有其他解决方案都以某种方式改变了基本功能，因此只需要更改为类的ID，xyz的答案改变了基本功能并且难以使用后来在我的剧本中，因为它需要自我引用并且完全是动态的，而Dean Meehan的回答改变了布局而不是我想做的事情！

我将在此JSBIN

上更新此时间选择器项目的进度

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

2 个答案: