javascript - jQuery .click 问题

Question

我面临着非常奇怪和困难的问题。我正在开发一个网络应用程序，我在其中创建了一些小部件。如果我单击图标，小部件编辑器将出现在模块化弹出窗口中，用户可以输入他的数据，该数据将作为标签显示在仪表板上。我在仪表板上的标签上方有“编辑”按钮，现在我想添加一个删除按钮，假设用户将在仪表板上添加小部件，后来他发现不需要该仪表板，因此他单击删除按钮 该小部件应该被删除，如果用户在删除后觉得他再次想要该小部件，当他单击之前删除的特定小部件的图标时，该小部件应该再次出现。我尝试这样做，但是一旦单击删除按钮，我就可以删除该小部件，但是当我单击小部件的图标时，我无法返回。

请帮我解决这个问题。

Answer 1

只是猜测您要做什么，下面是添加可以再次关闭的 div 的示例:

设置:

var WIDGET_MARKUP =
    "<div class='widget'>I'm the widget. " +
    "<span class='close'>Close</span>" +
    "</div>";

// Opens the widget, returns true; if the widget is already
// open, doesn't open a a second and returns false.
function openWidget(onClose) {
  var widget;

  // If there's already one open, don't do anything
  if ($("div.widget").length > 0) {
    // Already open, don't open another
    return false;
  }

  // There isn't, add one
  widget = $(WIDGET_MARKUP);
  widget.appendTo(document.body);
  widget.delegate('span.close', 'click', function() {
    // Remove the widget
    widget.remove();

    // Call the callback if any
    if (onClose) {
      try {
        onClose();
      }
      catch (e) {
      }
    }
  });

  // true = opened the widget
  return true;
}

用途:

$('#btnAddWidget').click(function() {
  var button = this;

  if (openWidget(handleClose)) {
    // Opened the widget, disable our button
    button.disabled = true;
  }

  function handleClose() {
    // Widget was closd, re-enable the button
    button.disabled = false;
  }
});

Live example

显然，只有当您需要时，禁用该按钮才有意义；如果你不这样做，就这样使用它:

设置:

var WIDGET_MARKUP =
    "<div class='widget'>I'm the widget. " +
    "<span class='close'>Close</span>" +
    "</div>";

// Opens the widget, returns true; if the widget is already
// open, doesn't open a a second and returns false.
function openWidget(onClose) {
  var widget;

  widget = $(WIDGET_MARKUP);
  widget.appendTo(document.body);
  widget.delegate('span.close', 'click', function() {
    // Remove the widget
    widget.remove();

    // Call the callback if any
    if (onClose) {
      try {
        onClose();
      }
      catch (e) {
      }
    }
  });
}

用途:

$('#btnAddWidget').click(function() {
    openWidget();
});

Live example