Question

我通过克隆行动态地向表中添加行。一个细胞有一个输入元素。克隆行时，输入元素的ID值将更改为唯一，但所有输入都具有相同的类。我有一个分配给分配给input元素的类的click函数，它打开一个jQuery模式对话框（）。 dialog（）有一个textarea，用户可以在其中输入注释 当用户点击对话框（）中的“接受”时，我希望对话框的textarea元素的值写入被点击的输入元素的值。

这仅在单击第一个原始输入元素时有效。添加行并单击输入元素将打开对话框（），但不会更新输入元素。

确实会发生一种奇怪的行为...... 使用“添加行”按钮添加行后，如果更改了原始行的输入元素，所有输入元素都更改为该文本。（注意：我没有包含datepicker代码）

必须与IE7兼容。（我知道这是老了！）

我正在使用以下jquery脚本：（jquery-1.8.2.js）和（jquery-ui-1.9.1.custom.min.js）

这里是简化的HTML：

<form id="frmTask">
<div id="popupDialog" title="Enter your comments for this IDPM Task here.">
    <p>
<div>characters left: <span id="txt-length-left"></span></div>
<textarea cols="50" rows="30" name="CommentsDialog" id="CommentsDialog" class="txtComments"></textarea>
</p>
</div>
<table style="" id="tblInput" border="0" name="tblInput" cellspacing="0" cellpadding="0" width="600" summary="Formatting table for output display">
<thead>
<tr>
<th scope="col"><div width="24px">&nbsp;</div></th>
<th scope="col">Suspense Date</th>
<th scope="col">Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tdTop">&nbsp;</td>
<td class="tdTop"><input name="SuspenseDate1" id="SuspenseDate1" value="" class="DatePick" /></td>
<td class="tdTop"><input cols="25" rows="1" name="Comments1" id="Comments1" class="popComments"></input></td>
</tr>
</tbody>
</table>
<button id="AddNew">Add Row</button>
</form>

以下是代码：

 // Copy/Clone the last row and append it to the TABLE ID referenced in the function call
    $("#AddNew").click(function() {
    addTableRow("#tblInput");
    }); 

    function addTableRow(table) {
                                                //$('input.DatePick').removeClass('hasDatepicker').datepicker();
    var tbody = $(table + ' tbody');
    var rows = tbody.find('tr').length;
    var newRow = tbody.find('tr:first').clone(true).appendTo(tbody);
    newRow.find(':input').val('').each(function() {
    var id = this.id
    if (id) {
    this.id = this.id.split('_')[0] + '_' + rows;
    }
    }).end().find('.DatePick').removeClass('hasDatepicker').datepicker();
    // set variable to the last row in the table    
    newRow = $(table + ' tr:last');
    // Remove the delete icon from the previous row before creating the new row.
    $('a.remove').remove();
    // insert a remove link in the last cell
    $('td:first-child', newRow).html('<a href="" class="remove" alt="Delete This Row" title="Delete This Row"><img src="/images/Delete_Icon_48x48.jpg" height="24px" width="24px" border="0"><\/a>');
    var addRow = $(this).parent().parent();
    return true;
    }

以下是模态对话框代码：

    var inputID;
    $('.popComments').on('click', function(event) {
    inputID = event.target.id;
    alert(event.target.id + ' <- event.target.id : inputID -> ' + inputID);          
    $("#popupDialog").data("id", inputID);
    var $stuff = "Comments1";
    $('#popupDialog').dialog('open');
    $('textarea.txtComments').text("");
    });          
    // This is the popUp dialog for entering user Comments
    $("#popupDialog").dialog({
    modal: true,
    autoOpen: false,
    width:"600",
    position:{ my: "top", at: "top", of: "#Comments1" },
    buttons: {
    'Cancel': function() {
    $(this).dialog('close');
    },
    'Accept': function() {
    var helpMe  = $("#popupDialog").data("id");
    var txtComments = $(this).find('textarea.txtComments').val();
    $('#frmTask input#' + helpMe).val(txtComments);
    $(this).dialog('close');
    }
    }
    });

Answer 1

狂躁，我想你在这里跳过一些不必要的箍。

避免使用ID - 在复制表行时通常不需要它们，即使涉及复杂的事件处理也是如此。
在原始原型行中硬编码删除按钮，并在样式表中将其设置为display:none。

然后，javascript将简化如下：

$("#AddNew").on('click', function() {
    var tbody = $('#tblInput tbody');
    var newRow = tbody.find('tr').eq(0).clone(true).appendTo(tbody);
    newRow.find('input').val('').end().find('.DatePick').removeClass('hasDatepicker').datepicker();
    tbody.find('a.remove').hide().filter(":last").show();
});

您需要修改对话框代码才能在没有输入ID的情况下工作，但这应该不是问题。您只需在打开对话框时保持对javascript中“active”输入元素的引用，以便可以将文本放回正确的位置。这实际上比记住一个id更简单，更经济，然后使用它来重新发现DOM中的正确输入元素（这可能是你目前所做的）。

如果您仍然遇到对话框等问题，请编辑您的问题以包含代码，我会看一下。

编辑：

这里有一些处理注释的代码，避免了对输入字段id的需求：

var $$ = {}; //cache of reusable jQuery objects
$$.popComments = $('.popComments');
$$.popupDialog = $('#popupDialog');
$$.popupComments = $popupDialog.find('textarea.txtComments');
$$.activeInput = null;

$$.popComments.on('click', function() {
    $$.activeInput = $(this);
    $$.popupComments.empty();
    $$.popupDialog.dialog('open');
});
// This is the popUp dialog for entering user Comments
$$.popupDialog.dialog({
    modal: true,
    autoOpen: false,
    width: "600",
    position:{ my: "top", at: "top", of: "#Comments1" },
    buttons: {
        'Cancel': function() {
            $(this).dialog('close');
        },
        'Accept': function() {
            $$.activeInput.val( $$.popupComments.val() );
            $(this).dialog('close');
        }
    }
});

注意：

未经测试。
处理能力是经济的，不需要在每次需要解决时重新发现DOM中的元素。 $$缓存在这里有所帮助，并通过充当其自己的内部命名空间来节省阻塞主$.function(){...}命名空间。
可能是对话框已经工作，所以我没有检查.dialog()选项（除了'Accept'功能）。

使用dialog（）更新动态创建的输入

1 个答案:

编辑：