JQuery append not working in IE9 and JQuery 1.7.1

Question

I am struggling to integrate this Bootstrap-tag plugin into my app. It is working fine with jQuery 1.8.3 as you can see it on the GitHub project page .

My application is using JQuery 1.7.1. It works great in Chrome but not in IE (not a surprise). I've spent two days now trying to understand why with no luck (I am a jQuery/JS novice).

I created a jsFiddle that captures and shows this error when ran in IE 9.

The specific error is:

SCRIPT438: Object doesn't support property or method 'append'

bootstrap-tag.js, line 117 character 5

And it refers to this line/code:

$('<span class="tag">')
  .text(value)
  .append($('<button type="button" class="close">&times;</button>')
    .on('click', function () {
      that.remove(that.element.siblings('.tag').index($(this).closest('.tag')))
    })
  )
  .insertBefore(that.element)

QUESTION: Any idea why IE9 is complaining about the append not recognized?

Answer 1

Well, indeed jQuery on older versions do not return the reference to jQuery object after text() function for IE9.

Basically, the solution was not use the text function and appends the text in the creation of the span. So I changed to code bellow in bootstrap-tag.js on line 117 that solves the problem.

Follows the JS Fiddle Solution

Before (IE9 Buggy):

$('<span class="tag">')
  .text(value)
  .append($('<button type="button" class="close">&times;</button>')
    .on('click', function () {
      that.remove(that.element.siblings('.tag').index($(this).closest('.tag')))
    })
  )
  .insertBefore(that.element)

After (Fixed):

$('<span class="tag">' + value + '</span>')
    .append($('<button type="button" class="close">&times;</button>')
    .on('click', function () {
      that.remove(that.element.siblings('.tag').index($(this).closest('.tag')))
    })
  )
  .insertBefore(that.element)

Hope it helps.