Help with Drupal.behaviors and AJAX refresh

Question

After a pause, I've been working on my Drupal 7 site again, and I have stumbled upon a minor problem regarding JavaScript and Ajax.

Thanks to this great website, I've learned of Drupal.behaviors, and I tried implementing my JavaScript code with it, so it shows up after an Ajax refresh within a view.

(function ($) {
Drupal.behaviors.borderfarba = {
    attach: function (context, settings) {

        var nmbr = 1;

        $(".moviescreenss",context).each(function () {

            var clrclass = "clr" + nmbr.toString();
            $(this).addClass(clrclass);
            addborder(clrclass);
            nmbr++;
        });


        function addborder(clrclass) {
            $("." + clrclass + " img").insetBorder({
            borderColor: get_random_color(),
            inset: 5
            });
        }

        function rand(min, max) {
            return parseInt(Math.random() * (max - min + 1), 10) + min;
        }

        function get_random_color() {
            var h = rand(40, 130);
            var s = rand(30, 75);
            var l = rand(40, 60);
            return 'hsl(' + h + ',' + s + '%,' + l + '%)';
        }
    }
};

})(jQuery);

I'm not that experienced with JavaScript, and I'm sure there are many possible improvements with the core code itself (e.g. the way functions are called).

What it does is add the jQuery inset border effect to every image link generated by the Views module, and color them with a random color within a specified range from reddish to green. (I somehow implemented this with a for-loop that adds a new "class+1" to each image, and the random HSL generator I found somewhere online.)

After adding the Drupal behaviors, the inset borders are still there after the AJAX action, but they are static and the hover effect is gone.

* UPDATE * I have noticed this only happens afte clicking on a submit button. For example when using the VIEWS pager in ajax mode, the javascript applies fine

Any help would be greatly appreciated, as I'm certain it will help me understand JavaScript scripting better, besides new Drupal techniques

Answer 1

Well it seems I have found a solution :-)

I needed to add 'context' to the function of border adding itself

so this

 $(".moviescreenss").each(function () {

becomes this

 $(".moviescreenss",context).each(function () {

and now it seems to work fine :-)

Still need to see if I can make the whole code more efficient, I'll go to stackoverflow with this and update here if I get anything better