Question

我使用jQuery UI对话框和Columnizer插件打开对话框模态窗口并在列中显示表格（如果需要）。一切都很好，但......我第一次点击。当我在链接上第二次单击时（whitch必须打开对话框），columnizer不工作，但被调用。问题出在哪里？

$('#link_to_click').live('click', function(e) {
  e.preventDefault();

  // How much items per column
  var items_per_column = 15;

  var _dialog_id = '_modal_dialog_box_1';
  var $dialog = $('<div id="'+_dialog_id+'"></div>');

  /*
  * There is getting and parsing data from JSON
  * var data is parsed and created HTML
  */

  // This is wrapper what I will tell columnizer to columnize <div's> inside this wrapper 
  data = $('<div/>', {id: 'wrapper', 'class': 'table'}).html(data);


  $dialog.html(data).dialog({
    closeOnEscape: true,
    modal:true,
    title: $(this).attr('title'),
    resizable: false,
    width: 1000
  });

  // Columnizing (columns variable is calculated by items in JSON)
  if(columns > 1) {
    $('#wrapper').columnize({columns:columns,lastNeverTallest:true});
  }
  // Fixing bug that UI dialog is not centred after showing
  $('#'+_dialog_id).dialog("option", "position", "center");

  return false;
});

因此，当我第一次点击一切都很好时 - 对话框显示出来，数据已经列好了，我很高兴。然后我关闭对话框并再次点击#link_to_click。显示对话框，但是分类器不起作用......

有什么想法吗？

Answer 1

我找到了错误和解决方案。我不知道为什么，但如果对话框被调用两次，则需要删除dynamicaly创建的元素。所以我在字符串

之前加了一行

var _dialog_id = '_modal_dialog_box_1';
$('#'+_dialog_id).remove(); // Need to remove else on dublicate click will not load columnizer
var $dialog = $('<div id="'+_dialog_id+'"></div>');

现在一切正常。

也许有人可以解释为什么会这样？

谢谢！

jQuery UI对话框和columnizer插件bug

1 个答案: