jquery - 使用dialog()更新动态创建的输入

Question

我通过克隆行动态地将行添加到表中。一个细胞有一个输入元素。克隆行时，输入元素的 ID 值将更改为唯一，但所有输入都具有相同的类。我有一个单击函数分配给分配给打开 jQuery 模式对话框()的输入元素的类。 dialog() 有一个文本区域，用户可以在其中输入评论。
当用户单击对话框()中的“接受”时，我希望将对话框的 textarea 元素的值写入所单击的输入元素的值。

这仅在单击第一个原始输入元素时有效。添加行并单击输入元素会打开dialog()，但输入元素不会更新。

确实发生了一种奇怪的行为......使用“添加行”按钮添加行后，如果更改原始行的输入元素，所有输入元素都更改为该文本。(注意:我没有包含日期​​选择器代码)

它必须兼容 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

Manic，我认为你在这里跳过了一些不必要的麻烦。

• 避免使用 ID - 复制表行时通常不需要 ID，即使涉及复杂的事件处理也是如此。
• 在原始原型(prototype)行中对删除按钮进行硬编码，并在样式表中设置 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 中保留对“事件”输入元素的引用，以便可以将文本放回正确的位置。这实际上比记住 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”功能除外)。