为表中的每一行创建jQuery ui对话框

Question

我正在尝试使用名为searchResults的数组将行追加到表中。在我引入jQuery UI对话框之前，一切都会按预期进行。问题是第一列的每一行都需要一个新对话框。我对所有这些都还很陌生，因此可以确定我有时会错误地使用索引。这只是为了让您了解我要完成的工作。有任何想法如何正确执行此操作吗？

for (var i = 0; i < searchResults.length; i++)
{
    $('#patientFileDialog[i]').dialog();

    $'#openPFDialog[i]').click(function() {
        $('#patientFileDialog[i]').dialog('open');
    });

    var dialog[i] = $(`<div id="patientFileDialog[i]" title="Patient File">${searchResults[i].patientWebLink}</div>`);

    body.append('<tr>'+
            `<td><button id="openPFDialog[i]">Click Here</button></td>` +
            `<td>${searchResults[i].patientFirstName}</td>` +
            `<td>${searchResults[i].patientLastName}</td>` +
            `<td>${searchResults[i].patientDateOfBirth}</td>` +
            `<td>${searchResults[i].patientDataPulseID}</td>` +
            `<td>${searchResults[i].patientLaserFicheID}</td>` +
            '</tr>')
}

Answer 1

[在看了一些代码之后，我想我可以看到您正在尝试做的事情。 Working JSFiddle，还有一些伪造的searchResults，因此我们可以在操作中看到它。

您的代码中存在一些问题：

• 使用$('#patientFileDialog[i]')和$'#openPFDialog[i]')之类的选择器将尝试将页面上具有这些ID的元素进行匹配。 AFAICT实际上还不存在，您正在尝试创建它们。

• [var dialog[i] = ...将某些div设置为字符串，但这些字符串永远不会添加到页面上；

• 正如我在评论中提到的那样，存在一些语法错误，也许只是错别字和混合格式，因此在SO上]；

这里是代码的更新版本。显着变化：

• 代替为每个openPFDialog按钮添加事件处理程序，更好的做法是仅添加一个与所有按钮都匹配的事件处理程序。然后，该单个处理程序可以计算出单击了哪个按钮，并仅对那个按钮（而不是全部按钮）采取正确的操作。在这种情况下，如果所有按钮都使用与openPFDialog-X匹配的ID，其中X是一个数字，则可以定位与该模式匹配的任何内容（使用starts with selector，然后通过删除X来找到openPFDialog- ]部分with replace。

• 上面有一个复杂的问题。页面加载时解析的选择器将仅匹配当时存在的元素。在这种情况下，您要向页面添加新元素，并且在页面加载时定义的选择器将与它们不匹配。解决方案是改为选择页面加载时存在does的某些父元素，然后进行过滤。这称为replace（搜索以“委派的事件处理程序”开头的段落）。

• 根据您所拥有的，我想您创建的event delegation应该放置在页面上未显示的某些父元素内吗？这就是我所做的。

这里是代码（和patientFileDialog）：

working JSFiddle

更新

最后一个建议-通过添加/删除元素来操作DOM是很慢的。如果需要对数组中的每个元素执行此操作，则最好避免在每次迭代中实际添加内容，而只是构建一个字符串。然后，一旦完成迭代，只需添加较大的单个字符串，即可更改一次DOM。这是执行此操作所需的基本更改：

var dialog, i;

// Single click handler for anything that starts with "openPFDialog-".
// Since those elements don't exist on the page yet, we need to instead
// select a parent object, say the body, and filter for clicks on our
// elements starting with our pattern
$('body').on('click', '[id^=openPFDialog]', function() {
    // We need to find the "i"
    i = $(this).attr('id').replace(/openPFDialog-/,'');
    console.log('clicked on id', i);
    $('#patientFileDialog-' + i).dialog();
});

for (var i = 0; i < searchResults.length; i++) {    
    // Create a new div with ID like "patientFileDialog-1", using the current
    // search result
    dialog = $('<div id="patientFileDialog-' + i + '" title="Patient File">' + searchResults[i].patientWebLink + '</div>');

    // Add it to the page.  I've use a div with ID dialogs which is hidden
    $('#dialogs').append(dialog);

    $('table').append('<tr>'+
        '<td><button id="openPFDialog-' + i + '">Click Here</button></td>' +
        '<td>' + searchResults[i].patientFirstName + '</td>' +
        '<td>' + searchResults[i].patientLastName + '</td>' +
        '<td>' + searchResults[i].patientDateOfBirth + '</td>' +
        '<td>' + searchResults[i].patientDataPulseID + '</td>' +
        '<td>' + searchResults[i].patientLaserFicheID + '</td>' +
        '</tr>');
}

Answer 2

请考虑以下代码。

// Add some new variables to hold our big strings
var dialog, dialogs, row, rows, i;

// ... your code ...

for (var i = 0; i < searchResults.length; i++) {

    // Create the dialog ...
    dialog = ...

    // Append it to our big string of all dialogs
    dialogs += dialog;

    // Same approach for rows
    row = '<tr>'+ ... all that stuff
    rows += row;
}

// Finished iterating, nothing added to DOM yet.  Do it all at once::
$('#dialogs').append(dialogs);
$('table').append(rows);

没有

function showPatientDialog(cnt){
  $("#patient-file-dialog").html(cnt).dialog("open");
}

var d = $("<div>", {
  id: "patient-file-dialog",
  title: "Patient File"
})
  .appendTo("body")
  .dialog({
    autoOpen: false
  });
$.each(searchResults, function(i, result) {
  var row = $("<tr>").appendTo(body);
  $("<td>").appendTo(row).html($("<button>", {
    id: "open-pdf-dialog-" + i
  }).click(function() {
    showPatientDialog(result.patientWebLink);
  }));
  $("<td>").appendTo(row).html(result.patientFirstName);
  $("<td>").appendTo(row).html(result.patientLastName);
  $("<td>").appendTo(row).html(result.patientDateOfBirth);
  $("<td>").appendTo(row).html(result.patientDataPulseID);
  $("<td>").appendTo(row).html(result.patientLaserFicheID);
});

，就无法正确测试。