Dynamically added property not visible in html element

Question

I added the 'disabled' property to a textbox input field dynamically with jQuery. But looking to the generated HTML, it's not visible on the textbox input field to which I have added the 'disabled' property to.

And because it's not added to it, my other jQuery function never gets entered.

Here is my code:

This happens some where in the doc load event:

$('.testGroup :input').prop('disabled', true)

This function shows a tooltip when you click or hover over disabled inputs:

$('input:disabled').after(function (e) {
        debugger;
        d = $("<div>");
        i = $(this);
        d.css({
            height: i.outerHeight(),
            width: i.outerWidth(),
            position: "absolute",
        })
        d.css(i.offset());
        d.attr("title", i.attr("title"));
        d.tooltip();
        return d;
    });

I have used/tried both prop() and attr(), but non of them enters my after() function.

According to Paul Rosania I should use prop().

Is there another way to accomplish this?

EDIT: jsFiddle

Answer 1

The problem is that your code that adds the tooltip only runs once after the DOM is ready. You need to call it for every element that you disable.

A simple solution would be to write a method for your tooltip:

function AddToolTip() {
    d = $("<div>");
    i = $(this);
    d.css({
        height: i.outerHeight(),
        width: i.outerWidth(),
        position: "absolute",
    })
    d.css(i.offset());
    d.attr("title", i.attr("title"));
    d.tooltip();
    return d;
}

Then, use this method to apply the tooltip to the elements that are disabled on DOM ready

$('input:disabled, button:disabled').after(AddToolTip);

On disabling an input element, call the method again

$('#test').prop('disabled', true).after(AddToolTip);

Fiddle