通过单击img显示输入上的显示框

Display box on an input through clicking on img

本文关键字:显示 输入 单击 img      更新时间:2023-09-26

我想如果我点击图像,那么使用$('.daterangepicker').show();在输入字段中显示框。

在onclick

:

onclick="OpenDatePicker('DateAge')

标记:

<span class="DateLabelImage" style="cursor: pointer" onclick="OpenDatePicker('DateAge')"><img class="calendarImage" src="../../img/StatImg.png"></span>
<input type="text" id="DateAge" placeholder="Click to open Date Box" class="AgeChangeInput range"/>

脚本:

<!-- Call datepicker through image button -->
<script>
function OpenDatePicker(DatePicker)
{
    var classIt = '.' + DatePicker;
    alert(classIt);
    // Click on any Input Field.
    $(classIt).on('click', function()
    {
        alert('Good');
        // Show Box on click Date.
        $('.daterangepicker').show();
    });
}
</script>

我试着使用:

.on('click', function()

但这不是工作,因为我没有点击输入字段,而是点击图像

http://jsfiddle.net/vikramjakkampudi/9NMgT/1/

function OpenDatePicker(DatPicke)
{
    var classIt = '#' + DatPicke;
    alert(classIt);
    // Click on any Input Field.
    $(classIt).on('click', function()
    {
        alert('Good');
        // Show Box on click Date.
      //  $('.daterangepicker').show();
        $('.ui-datepicker-div').show();
    });
}

click事件应该绑定在ready或document中。准备函数。另一件事是'DateAge'是一个id而不是一个类,所以你应该用'#'而不是'.'来调用。

$(document).ready(function () {
        $("#DateAge").click(function () {
            alert('Good');
            $('.daterangepicker').show();
        });
    });

我认为应该是#而不是.。其次,我在标记中找不到.daterangepicker。我做了我说过的改变。这是链接http://jsbin.com/feyunagi/1/edit