jQuery .click issue

Question

I am facing very strange and difficult problem. I am developing a web app, where I have created few widgets. If I click on Icon the widget editor will appear in a modular pop-up and user can enter his data and the that data will be presented on dashboard as label. I have "edit" button above the label which is placed on the dashboard, now I want to add a delete button, suppose the user will add the widget on the dashboard and later he finds he doesn't require that dashboard so he clicks on delete button the widget should be deleted, if user feels he wants that widget again after deleting, when he clicks on the icon of the particular widget which he deleted previously, the widget should appear again. I tried to do that but once I click on the delete button I am able to delete the widget but When I click on the icon of the widget I am not able to get in back.

Please help me to solve this issue.

There's little to no chance anyone can help you get this working without seeing your code. Create a pared-down example with the minimum necessary to replicate the issue, post it in the text of your question, and optionally to a site like jsbin.com or jsfiddle.net. (But not just to an external site.) — T.J. Crowder
– T.J. Crowder, Commented Feb 23, 2011 at 12:01
well thats not very true, fair point but not true :) i think s/he using the .click or .bind when he needs to use .live or .delegate so it remembers future elements of the same/similar elements :) thats said i could also be wrong :) — Val
– Val, Commented Feb 23, 2011 at 12:16

T.J. Crowder · Accepted Answer · 2011-02-23 14:00:53Z

Just taking a guess at what you're looking to do, here's an example of adding a div that you can close again:

Setup:

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;
}

Use:

$('#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

Obviously the disabling of the button is only relevant if you want that; if you don't, just use it like this:

Setup:

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) {
      }
    }
  });
}

Use:

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

Live example

Collectives™ on Stack Overflow

jQuery .click issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related