bootstrap 3 navbar collapse button not working

Question

I did some modification in navbar but now the toggle button is not responding on click. Below is my code. Where I am wrong ??

---

CODE:

Answer 1

In my case the issue was due to how I build my Nav bar. I was doing it through a jQuery plugin so I can quickly build Bootstrap components through javascript.

To cut a long story short binding the data elements of the button through jQuery .data() resulted in a collapse button that didn't work, doing it via .attr() fixed the issue.

This doesn't work:

$this.addClass("navbar navbar-default")
  .append($("
").addClass("container-fluid")
    .append($("
").addClass("navbar-header")
      .append($("").addClass("navbar-toggle collapsed")
        .attr("type","button")
        .attr("aria-expanded", "false")
        .data("target","#" + id)
        .data("toggle","collapse")
        .html("Toggle navigation"
            + ""
            + ""
            + ""))
        .append($("").addClass("navbar-brand")
          .append(document.createTextNode(settings.label))))
    .append($("
").addClass("collapse navbar-collapse").attr("id",id)));

But this does (with the changes left in comments):

$this.addClass("navbar navbar-default")
  .append($("
").addClass("container-fluid")
    .append($("
").addClass("navbar-header")
      .append($("").addClass("navbar-toggle collapsed")
        .attr("type","button")
        .attr("aria-expanded", "false")
        .attr("data-target", "#" + id) //.data("target","#" + id)
        .attr("data-toggle", "collapse") // .data("toggle","collapse")
        .html("Toggle navigation"
            + ""
            + ""
            + ""))
        .append($("").addClass("navbar-brand")
          .append(document.createTextNode(settings.label))))
    .append($("
").addClass("collapse navbar-collapse").attr("id",id)));

I can only assume that this is related to the way jQuery binds .data(), it doesn't write the attributes out to the elements, but just attaches them to the jQuery object. Using the .data() version resulted in HTML:

Where as the .attr() version gives:

It seems that Bootstrap needs the data-nnn attribute in the HTML.