How to join two jQuery event handlers together

Question

I have two event handlers. One is a click handler and the other is a change handler. Besides the event selector the only difference is the assigning of a different variable to className.

Note: The entire code is not shown here.

Event handler 1#:

    $(document).on('change', '#selectContainer [id]', function () {
    prevClass = className;
    className = $("select").val();       <<<< DIFFERENT

    var back = '';

    link[prevClass] = original;
    original = link[className];
    link[className] += back;


       $('.inter').fadeTo(250, 0.25, function () {
           $('.inter').html(link[className]); 

           $('.inter').css({'background-image': 'url("' + className + '.png")'});
           $('.inter').fadeTo(250, 1.00);

       });
   });

Event handler 2#:

   $(document).on('click', '.inter [class], .inter #back [id]', function () {
   prevClass = className;
   className = (this.id || this.className).substr(1);      <<<< DIFFERENT


    var back = '';

    link[prevClass] = original;
    original = link[className];
    link[className] += back;


       $('.inter').fadeTo(250, 0.25, function () {
           $('.inter').html(link[className]); 

           $('.inter').css({'background-image': 'url("' + className + '.png")'});
           $('.inter').fadeTo(250, 1.00);

       });
   });

ENTIRE CODE:

/* Preload images function for speed*/

function preload(arrayOfImages) {
    $('body').addClass("loading");
    $(arrayOfImages).each(function () {
        $('')[0].src = this;
    });
    $('body').removeClass("loading");
}

function transformImage(className, original, link, prevClass) {
    var back = '';

    link[prevClass] = original;
    original = link[className];

    link[className] += back;



    $('.inter').fadeTo(250, 0.25, function () {
        $('.inter').html(link[className]);


        $('.inter').css({
            'background-image': 'url("' + className + '.png")'
        });
        $('.inter').fadeTo(250, 1.00);

    });
}

$(document).ready(function () {
    /* Images to preload*/
    var preloadi = [
        '/WCMSWR/_assets/images/1.png',
        '/WCMSWR/_assets/images/2.png',
        '/WCMSWR/_assets/images/3.png',
        '/WCMSWR/_assets/images/4.png',
        '/WCMSWR/_assets/images/5.png',
        '/WCMSWR/_assets/images/6.png',
        '/WCMSWR/_assets/images/7.png',
        '/WCMSWR/_assets/images/8.png',
        '/WCMSWR/_assets/images/9.png',
        '/WCMSWR/_assets/images/10.png'];


    var prevClass = '0';
    var className = '0';
    var original = 'yresadfasxdsa';


    var link = ['
This is a tooltip. This is the first step for the jquery path system
', // 0
    '
', // 1
    '
', // 2
    '
', // 3
    '
', // 4
    '
', // 5
    '
', // 6
    '
', // 7
    '
', // 8
    '
', // 9
    '
', // 10
    '
', // 11
    '
', // 12
    '
', // 13
    '', // 14
    '
', // 15
    '', // 16
    '
', // 17
    '', // 18
    '
', // 19
    '', // 20
    '', // 21
    '
This is a tooltip. This is the first step for the jquery path system
', // 22
    '', // 23
    '
', // 24
    '
' // 25
    ];

    /* If you wish to insert tooltips use the below template code

This is a tooltip. This is the first step for the jquery path system


*/

    preload(preloadi);

    $(document).on('mouseenter mouseleave', '.inter [class]', function (event) {
        $('.' + this.className + 't').toggle(event.type === 'mouseenter');
    });

    $(document).on('change', '#selectContainer [id]', function () {
    alert(original);
    prevClass = className;
    className = $("select").val();
    transformImage(className, original, link, prevClass); // call the method to do the image processing
    })

    $(document).on('click', '.inter [class], .inter #back [id]', function () {
    prevClass = className;
    className = (this.id || this.className).substr(1);
    transformImage(className, original, link, prevClass); // call the method to do the image processing
    })


})

SIDE NOTE:

On a side note if I am using incorrect terminology or if I should change the structure of my posts please correct me as I am still learning. :)

PSL · Accepted Answer

I would suggest not to mix up combining the event handlers that too of different selectors, instead just move generic functionality to a common function that can be called. This will help you maintain different event as it is ans any modification required in future on any of these handlers will make it easier with this approach rather than again splitting them out later.

sometimes you don't want to make everything DRY.

$(function(){ //ready is not required if it is bound to document head
    $(document).on('change', '#selectContainer [id]', function () {
         prevClass = className;
         className = $("select").val();       <<<< DIFFERENT
         transformImage(className); // call the method to do the image processing
      }

     $(document).on('click', '.inter [class], .inter #back [id]', function () {
       prevClass = className;
       className = (this.id || this.className).substr(1);      <<<< DIFFERENT
       transformImage(className);// call the method to do the image processing
     }
  });
//Move out your generic piece of functionality to another method. Put it out side of document.ready.
function transformImage(className)
{
    var back = '';

    link[prevClass] = original;
    original = link[className];
    link[className] += back;


       $('.inter').fadeTo(250, 0.25, function () {
           $('.inter').html(link[className]); 

           $('.inter').css({'background-image': 'url("' + className + '.png")'});
           $('.inter').fadeTo(250, 1.00);

       });
}

How to join two jQuery event handlers together

Answers (1)

Related Questions