Proper javascript notation

Question

The following code creates navigation links for a Twitter Bootstrap carousel. The script runs perfectly when saved on my local machine as well as hosted as its own document. When placed into a Drupal page, however, the javascript is modified. I understand that Drupal requires a special Javascript structure. Is that the case with my code below? Any suggestions would be helpful. Thanks!

--- You can see how Drupal closes tags on Line 10

Original Code - working:

$(document).ready(function() {
    $('#headerCarousel.carousel[id]').each(function() {
        var html = '<div class="nav-collapse collapse" data-target="' + $(this).attr('id') + '"><ul class="nav">';
        for(var i = 0; i != $(this).find('.item').size(); i ++) {
            html += '<li';
                if(i == 0) {
                    html += ' class="active"';
                }
            var item = $(this).find('.item').get(i);
            html += '><a href="#" data-toggle="collapse" data-target=".nav-collapse.in">'  + $(item).attr('data-title') + '</a></li>';
        }
        html += '</ul></li>';
        $('.btn-navbar').after(html);
        $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide();

    }).bind('slid', function(e) {
        var nav = $('.nav-collapse[data-target="' + $(this).attr('id') + '"] ul');
        var index = $(this).find('.item.active').index();
        var item = nav.find('li').get(index);
        nav.find('li.active').removeClass('active');
        $(item).addClass('active');

        if(index == 0) {
           $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut();
        } else {
           $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn();
        }
        if(index == nav.find('li').size() - 1) {
           $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut();
        } else {
           $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn();
        }
    });

   $('.bootstrap .nav a').bind('click', function(e) {
       var index = $(this).parent().index();
       var carousel = $('#' + $(this).closest('.nav-collapse').attr('data-target'));
       carousel.carousel(index);
       e.preventDefault();
   });
});

Generated code after placing in Drupal - broken:

$(document).ready(function() {
    $('#headerCarousel.carousel[id]').each(function() {
        var html = '<div class="nav-collapse collapse" data-target="' + $(this).attr('id') + '"><ul class="nav">';
        for(var i = 0; i != $(this).find('.item').size(); i ++) {
            var item = $(this).find('.item').get(i);
            html += '<li><a href="#" data-toggle="collapse" data-target=".nav-collapse.in">'  + $(item).attr('data-title') + '</a></li></ul>';
        }
        $('.btn-navbar').after(html);
        $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide();

    }).bind('slid', function(e) {
        var nav = $('.nav-collapse[data-target="' + $(this).attr('id') + '"] ul');
        var index = $(this).find('.item.active').index();
        var item = nav.find('li').get(index);
        nav.find('li.active').removeClass('active');
        $(item).addClass('active');

        if(index == 0) {
           $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut();
        } else {
           $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn();
        }
        if(index == nav.find('li').size() - 1) {
           $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut();
        } else {
           $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn();
        }
    });

   $('.bootstrap .nav a').bind('click', function(e) {
       var index = $(this).parent().index();
       var carousel = $('#' + $(this).closest('.nav-collapse').attr('data-target'));
       carousel.carousel(index);
       e.preventDefault();
   });
});

Answer 1

Behavior handling has changed again in Drupal 7, with modules now required to explicitly define their attach handler, and optionally specify a detach handler. add code like this way.

(function ($) {

  Drupal.behaviors.exampleModule = {
    attach: function (context, settings) {
    $('#headerCarousel.carousel[id]').each(function() {
        var html = '<div class="nav-collapse collapse" data-target="' + $(this).attr('id') + '"><ul class="nav">';
        for(var i = 0; i != $(this).find('.item').size(); i ++) {
            var item = $(this).find('.item').get(i);
            html += '<li><a href="#" data-toggle="collapse" data-target=".nav-collapse.in">'  + $(item).attr('data-title') + '</a></li></ul>';
        }
        $('.btn-navbar').after(html);
        $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide();

    }).bind('slid', function(e) {
        var nav = $('.nav-collapse[data-target="' + $(this).attr('id') + '"] ul');
        var index = $(this).find('.item.active').index();
        var item = nav.find('li').get(index);
        nav.find('li.active').removeClass('active');
        $(item).addClass('active');

        if(index == 0) {
           $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut();
        } else {
           $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn();
        }
        if(index == nav.find('li').size() - 1) {
           $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut();
        } else {
           $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn();
        }
    });

   $('.bootstrap .nav a').bind('click', function(e) {
       var index = $(this).parent().index();
       var carousel = $('#' + $(this).closest('.nav-collapse').attr('data-target'));
       carousel.carousel(index);
       e.preventDefault();
   });  

    }
  };

})(jQuery);