Add attribute to newly created element by jquery

Question

$(document).on('click', "#mybusi_radio", function(){
   alert("Script test");
   $(document).("#mybusi_radio").attr("checked", "checked");

});

I am trying to add "checked", "checked" attribute to an input radio element. this element creating by some script after page loaded. alert is working. how to add attribute to this input element. pls help

Answer 1

You can use

$(document).on('click', "#mybusi_radio", function () {
    $(this).prop("checked", true);
});

Answer 2

instead of

$(document).("#mybusi_radio").attr("checked", "checked"); 

use

$("#mybusi_radio").prop("checked",true); 

Answer 3

The problem is the selector:

$(document).("#mybusi_radio").attr("checked", "checked");

First, you select the document and then you supply an argument of '#mybusi_radio' but supply no named method to which that argument should be passed; therefore you have a syntax error.

Had you edited that to supply an appropriate method, such as find() , to give:

$(document).find('#mybusi_radio').attr('checked', 'checked');

This would (appear ¹ ) to work.

The problems with that approach is that you're searching the entire document for the element to which you already have a reference within the on() method's anonymous function: it's this (the DOM node) or $(this) (the jQuery object containing the DOM node).

Also, you're reacting to the click event which will capture clicks on the element itself, but will not react to the user clicking on the associated <label> element; so I'd suggest using the change event instead, to give:

$(document).on('change', "#mybusi_radio", function () {
    $(this).prop("checked", true);
});

Or, to avoid unnecessary use of jQuery when the DOM node is entirely sufficient to this use-case:

$(document).on('change', "#mybusi_radio", function () {
    this.checked = true;
});

But this is all a bit strange, given that you're effectively preventing the user from changing the checked / un- checked state of the element or needlessly setting it to checked when that would be the default behaviour of the element (assuming it is, indeed, an <input> of type radio ).

Having re-read your question, it seems that you're adding an element to the page (somehow) and want to set its initial state to be checked ? If that is, indeed, the use-case then you can simply set the state of the element at the point of its creation (which would be more specifically useful to you had you chosen to show us the script that creates, and appends, the relevant element):

// creates an <input> element:
$('<input />', {
    // sets the 'type' attribute/property to 'radio':
    'type' : 'radio',

    // sets the id of the <input> to
    // 'mybusi_radio':
    'id' : 'mybusi_radio',

    // sets the 'checked' property to true
    // Boolean (not a string):
    'checked' : true
// appends the created <input> to the element
// identified by its id, of 'parentElementID':
}).appendTo('#parentElementID');

---

1. Because attr() doesn't specifically update the underlying property of the element, you may find that the checked property is not updated/reflected later in your code when you may be surprised to find that the checked radio-input is behaving as an unchecked radio-input. Therefore it's preferable, if you're using a version of jQuery that supports prop() ² , to use prop() .
2. jQuery 1.6 and above, so you should be using a version of jQuery that supports/implements prop() .

References:

• appendTo() .
• attr() .
• find() .
• prop() .