Внешнее событие jquery .click() не работает иногда

Question

Я работаю над простым плагином для выбора времени jQuery, который работает на старых бутстрапах и jQuery, jQuery для плагина отправляется в sites.js и вызывается, помещая aclass on ДИВ так:

<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 Раймер

Answer 1

Это была решена Satpal Это было только идентификаторам, которые нуждались изменения в классы, как и все другие решения изменили базовую функциональность в какой-то мере, ответ АБВ изменил базовую функциональность и будет трудно использовать позже в моем скрипте, потому что он должен быть самореализованным и полностью динамичным, а ответ Дина Миэна меняет макет, а не то, что я хочу сделать!

Я буду обновлять ход этого проекта захватывающего времени на этом JSBIN

Answer 2

Переместить атрибут 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 3

Поэтому я считаю, что у вас есть ваши обработчики событий привязаны к Курсиву HTML, который не является фактической кнопкой. (Вы всегда должны прикреплять его к самой кнопке, то есть к самой большой вещи, которая считается кнопкой.

Также у вас есть эти элементы, созданные на лету, поэтому использование .click() не рекомендуется. на ('клик', Fn)

Я сделал некоторые изменения в код, который вы предоставили здесь: JSFiddle

HTML

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

Jquery

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