jQuery $(html, props) (DOM creation) ignores props map

Question

Hi everyone.

I'm unable to correctly create DOM elements using jQuery (1.3.2):

var ev_t;
$("#add-event").click(function() {
    ev_t = $("<form>", { action : "someURL" }).hide().appendTo(document.body);
    var fields = $("<div>").appendTo(ev_t);
    fields.load("someURL", function() {
        $("<input>", { type: "submit", value: "Add" }).appendTo(ev_t);
        ev_t.dialog();
    });
    ev_t.submit(function() {
        // form submission ...
        return false;
    });
    return false;
});

The and elements are inserted but none of the attributes (form action and input type and value) are set. What am I doing wrong?

Answer 1

It seems this functionality is only available from jQuery 1.4:

As of jQuery 1.4, we can pass a map of properties to the second argument. This argument accepts a superset of properties that can be passed to the .attr() method. Furthermore, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset.

Upgrade your jQuery libraries and you should be fine.

Answer 2

The second argument to jQuery (1.3+), when there is one, is the context for the the selector, not a set of attributes to apply. Try:

ev_t = $('<form>').attr('action','someUrl").hide().appendTo(document.body);

and

$("<input>").attr({ type: "submit", value: "Add" }).appendTo(ev_t);

Or upgrade to jQuery 1.4+