Question

I tried to show an error message using the jquery effect fadeTo and tried to hide the message by appending a button and using fadeout but doesn’t seem to work.

What I did was:

$("#sub_error")
  .fadeTo(200, 0.1, function()
  {
    $("#sub_error")
      .html(error.join("<br/><br/>"))
      .append('<br/><input type="button" name="err_ok" id="err_ok" value="ok">')
      .addClass('subboxerror')
      .fadeTo(900,1);
  });

$("#err_ok").click(function() 
{
  $("#sub_error").fadeOut("slow");
});

What am I doing wrong, could someone help me?

Answer 1

the #err_ok element doesn’t exist at first so the .click() handler is not applied to it.

You can solve this by putting

$("#err_ok").click(function () {
  $("#sub_error").fadeOut("slow");
});

in a function and call the function after creating the element in the DOM.

Edit: This should be a full solution:

$("#sub_error").fadeTo(200, 0.1, function() {
    $("#sub_error")
      .html(error.join("<br/><br/>"))
      .append('<br/><input type="button" name="err_ok" id="err_ok" value="ok">')
      .addClass('subboxerror')
      .fadeTo(900, 1);
    bindEvents();
});

function bindEvents() {
    $("#err_ok").click(function() {
        $("#sub_error").fadeOut("slow");
    });
}

There is also a “live” function that binds events to future created DOM elements too.