applying UI button() method is not working

I have created a dynamic text field and button. I want to apply UI button method on button but it is not working. Below is my code.

this.marketSymbolAddDialogObject
    = $('<b>Symbol:</b> <input type="text" id="symbolName" class="ui-widget ui-widget-content ui-corner-all"></input>'+
        '<butto开发者_JAVA百科n id="add_symbol">Add Symbol</button>'
        );    
var bt = this.marketSymbolAddDialogObject.find("button");
bt.button(); // **Not working**

what exactle i am doing wrong in it. I have also tried this $("#add_symbol").button() but not working.

"button" is not a descendent of this.marketSymbolAddDialogObject so doing a find() on it will result in 0 matched elements. Use filter(), like this:

var bt = this.marketSymbolAddDialogObject.filter("button");

find():

Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

filter():

Description: Reduce the set of matched elements to those that match the selector or pass the function's test.

You need to actually add the element to the DOM first before the find will work, I believe.

I am not familiar with the jquery`s 'button' function, but you may find useful to append your jquery created DOM elements:

this.marketSymbolAddDialogObject
= $('<b>Symbol:</b> <input type="text" id="symbolName" class="ui-widget ui-widget-content ui-corner-all"></input>'+
    '<button id="add_symbol">Add Symbol</button>'
    ).appendTo('body');