在文档就绪功能上将动态ID传递给Jquery

Question

很抱歉提出这个问题因为我无法弄清楚我的代码有什么问题。

这是我的数据表。我添加了一个动作编辑和删除。

当我点击编辑链接时，它会触发像这样的模态弹出窗口。

我想要的是当我点击输入字段“Date”时，我希望触发日期时间选择器。

这是我目前的代码：

HTML：

<div class="modal-body">
<label>Date:</label>
<div class="form-group">
    <div class='input-group date'>
        <input type='text' class="form-control datepicker" id="ot_date_<?php echo $edit_id; ?>" name="ot_date_edit" placeholder="Enter OT Date" required=""/>
        <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
    </div>
</div>

<label>OT Time-in:</label>
    <div class="form-group">
    <div class="input-group date">
        <input type='text' class="form-control datepicker"  id="ot_timein_edit" name="ot_timein_edit" placeholder="Enter OT Time-in" required=""/>
        <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
    </div>
</div>

<label>OT Time-out:</label>
<div class="form-group">
    <div class="input-group date">
        <input type='text' class="form-control datepicker" id="ot_timeout_edit" name="ot_timeout_edit" placeholder="Enter OT Time-out" required="" />
        <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span>
    </div>
</div>

JSS：

<script type="text/javascript">
$(document).ready(function() {
    jQuery("input").click(function (e) {        
        var getthevalue = $(this).attr('id');
        var Edit_ID = "#" + getthevalue ;
        $(Edit_ID).datetimepicker({
            format: 'MM/DD/YYYY'
        }); 
    });

});

提前多多感谢。

Answer 1

您无需从正确的输入中“提取”ID，您可以通过$(this)

访问点击的输入

修改 - 将$(this)替换为event.target，为日期/时间选择器添加if条件

修改2 - 将.click(function(event){});替换为.focus(function(event){});

$(document).ready(function() {
    jQuery(".datepicker").focus(function (event) {        
        var id = event.target.id;
        if(id == 'ot_timein_edit' || id == 'ot_timeout_edit'){
            //display timepicker for time by accessing the element with e.target
        } else {
            //Show date picker 
            $(event.target).datetimepicker({
                format: 'MM/DD/YYYY'
            }); 
        }
    });
});