The form selector does not work when working on dynamic layout

Question

When I execute the following code, it behaves as I expect (it writes the contents of the DIV element):

 var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; console.log($('div', html)); 

I cannot understand why the following code does NOT work:

 var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; console.log($('form', html)); 

They seem the same, so why does the DIV selector work when the FORM selector is not working?

Answer 1

 var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; console.log($(html).html()); 

since the form is the root element of html , $(html) will already return you the desired jQuery object. Therefore, if you try to select a form tag, Jquery tries to find another form tag in your form, which, of course, does not exist.

Answer 2

Simply put, the second example does not work because there is no element to search in the context of the string, while in the first example there is a div that exists in the context of the string.

In jQuery, the format $('div', html) means finding the div element in the context of the html variable. This is equivalent to $(html).find('div') . See http://api.jquery.com/jQuery/#expressioncontext

Selector context By default, selectors execute their search queries at the beginning of the DOM in the document root. However, an alternative context can be set for the search using the optional second parameter for the $ () function. For example, to perform a search in an event handler, a search may be limited as follows:

 $( "div.foo" ).click(function() { $( "span", this ).addClass( "bar" ); }); 

When the search for the range selector is limited by context, it is only within the element with a click that it will receive an additional class.

Internally, the selector context is implemented using the .find () method, therefore $( "span", this ) equivalent to $( this ).find( "span" ) .

Since your second example has no form inside the contents of the string (only inside it is a div), it does not find a match.

Answer 3

For the selector, the second parameter must be a jQuery or DOM object. If you provide a string, it will look for the contents of the string. To make it work, you must make the html variable an object:

 var html = $('<form action="/" method="get" name="myform"><div>123</div></form>'); console.log($('div', html)); 

Then, if you want, you can add it to your page:

 $('body').add(html); 

It is also useful to use the $ for jQuery object variables:

 var $html = $('<form action="/" method="get" name="myform"><div>123</div></form>'); 

So you can easily find out that it is already a jQuery object and you do not need to call ex. $ (html) .show () every time you want to do something about it, you can just call $ html.show ();

Answer 4

$('form', html) works like $(html).find('form') . .find() does not look at the source element, only at its children, so form cannot be found.

You can use some workaround for it, for example:

 var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; console.log($('form', '<div>' + html + '</div>')); 

Fiddle