I have encountered an issue with my jQuery code that works perfectly fine in Firefox and Chrome but fails to work in Internet Explorer 8 (I haven't tested it on other versions of IE). It is important to note that Internet Explorer is running in standards mode.
The main purpose of the following code is to dynamically create a new list item. The content of this list item is set to be the same as a form located within a hidden section element. However, when using IE, the section element becomes visible, and the list item is added to the list, but it appears empty.
I am wondering what could possibly be wrong with this code specifically in IE?
$('ul.elementlist').on('click', '.add-element-icon', function (event) {
var plusIcon = $(this);
plusIcon.hide();
var parentLi = plusIcon.parent();
var before = parentLi.attr('id');
var after = parentLi.next().attr('id');
if (typeof after === "undefined") {
after = 'none';
}
var li = $('<li class="element">').html($('section.add-element').html());
$('input[name="elementBefore"]', li).val(before);
$('input[name="elementAfter"]', li).val(after);
li.insertAfter(parentLi);
});