Jquery datepicker多行按钮图像答案

【问题标题】：Jquery datepicker multiple rows button imageJquery datepicker多行按钮图像
【发布时间】：2014-04-04 08:31:37
【问题描述】：

我在多行中使用了日期选择器。它工作正常。现在我将按钮图像放在日期选择器文本框中。我需要激活按钮图像以单击并显示日历。使用“showOn：'button'”后，我遇到了以下问题。当我通过单击“添加新”按钮添加更多行时，按钮图像会显示多次。请帮我解决问题

这里是javascript代码：

$(document).ready(function(){
        setdatepicker();
});

 $("input[type='button'].AddRow").live('click',
function() {
    var index = $(this).closest('tr').index();
    if (index > 0) {
        $(this).closest('tr').remove();
    } else {

        var $tr = $(this).closest('tr').clone(true);
        var $input = $tr.find('input.startdatum');
        var index = $('input#counter').val();
         $('#acti_btn').val('Delete');
        var id = 'datepicker' + index;
        index++;
        $('input#counter').val(index);
        $input.attr('id', id).data('index', index);
        console.log(index);
        $tr.prependTo($(this).closest('table'));
      setdatepicker();
    }

    var renum = 1;
    $("tr td div.incre_count").each(function() {
        $(this).text(renum);
        renum++;
    });
});




function setdatepicker(){
  $('.startdatum').each(function() {
            $(this).datepicker('destroy');
            $(this).datepicker({
                dateFormat: 'mm-dd-yy',
            showButtonPanel     :   true,
            showOn              :   'button',
            buttonImageOnly     :   true,
            buttonImage         :   '../themes/basic/images/calendar.png'

            });
        });

}

这是 HTML 代码：

<form>
<table width="90%" id="brdcst_info">
                                    <thead class="cf">
                                        <tr>
                                            <th>S.No.</th>
                                            <th>Match Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody style="text-align:center;">
                                                                            <tr class="odd">
                                            <td ><div id="likes" class="incre_count"> <span class="figure">1</span></div></td>

                                            <td>

                                            <div id="calen">

                                            <input class="startdatum calendar_input1" name="TvinvitationForm[datepicker1][]" id="TvinvitationForm_datepicker1" type="text" />  </div>                                           </td>
                                            <td>
                                                <input type="Button" value="Add New" class="AddRow"  id="acti_btn">                                         </td>
                                        </tr>
                                  </tbody>
                                </table>
                                <input type="hidden" value="0" id="counter">
</form>

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

我加了一行

$tr.find('img').remove();

在按钮单击事件处理程序中克隆元素的行之后：

} else {
    var $tr = $(this).closest('tr').clone(true);
    $tr.find('img').remove();
    var $input = $tr.find('input.startdatum');
    ...

请参阅here 获取小提琴

【讨论】：