Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I don't think the append is the cause of your problem. It's because the html you're passing into $() to create your elements is not a simple tag. </p> <p>According to the documentation of jQuery(html):</p> <blockquote> <p>If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's innerHTML mechanism. In most cases, jQuery creates a new element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag, such as <code>$('&lt;img /&gt;')</code> or <code>$('&lt;a&gt;&lt;/a&gt;')</code>, jQuery creates the element using the native JavaScript createElement() function.</p> </blockquote> <p>This quote is from this page: <a href="http://api.jquery.com/jQuery/#jQuery2" rel="nofollow">http://api.jquery.com/jQuery/#jQuery2</a></p> <p>This means that you may get a different element than what you intend because it's dependent on the browser's innerHTML property. You may find it easier if you pass in a simple tag <code>'&lt;a&gt;&lt;/a&gt;'</code> and add other attributes to it as a second argument map to $(html, props).</p> <p>To get this to work with a simple tag in the $(html, props) call, you would do something like this:</p> <pre><code>var $selector = $('&lt;a&gt;&lt;/a&gt;', { "class" : "x", "href" : "#", text : "Test", click: function() { alert('Clicked: ' + $(this).data('testdata')); return false; } }); $('#container').append($selector); $selector.data('testdata', "Test data"); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload