js file run again when file upload ajaxly

Question

I have a js file that I add it to my form in hook_form_alter with drupal_add_js, in my js I set a click handler on Html object(lets name it ".myhtml" ), everything work correctly in first load. I have a multi value image field in my form and when try to upload a image ajaxly , my js run again , and when I click on ".myhtml" my click handler called twice ( if I upload two image it fired triple and ... ).

One of my solution was first unbind then bind click,it work but I used icheck Jquery plugin for that field,then when I unbind it( icheck plugin ) will not work. So my problem is prevent run js file to again when file uploaded by ajax.

part of my code in hook_form_alter

    $scripts = drupal_add_js();
    $jspatah = drupal_get_path('module', 'tgdev') . '/tgsp.js';
    if(!isset($scripts[$jspatah])) {
        drupal_add_js($jspatah, array(
            'type' => 'file',
            'scope' => 'footer',
            'every_page' => FALSE,
            'weight' => 10,
        ));
    }

and part of my js file

 (function ($) {
Drupal.behaviors.tgdev = {
    attach: function (context, settings) {
      $(document).ready(function(){
            if($('#edit-field-images .image-preview').length==0){
            $('.form-item-field-feature-und-email .iCheck-helper ').on('click', function () {
                  if($(this).parent('.icheckbox_line').hasClass('checked')) {
                  console.log('checked');
                     getSubsAj('mail');
             });
             }
        console.log($('#edit-field-images .image-preview').length);
        });
      }
    };
})(jQuery);

Answer 1

Solution: Using jQuery Once

Drupal 7 integrates the Jquery Once plugin into Drupal 7 core. This plugin adds a simple class to the HTML element to ensure that the behavior is only processed one time. Here is how we would modify our JavaScript to work with the Jquery Once plugin.

(function ($) {
  Drupal.behaviors.tgdev = {
    attach: function (context, settings) {
      if($('#edit-field-images .image-preview').length==0){
        $('.form-item-field-feature-und-email .iCheck-helper ').once('click', function () {
          if($(this).parent('.icheckbox_line').hasClass('checked')) {
            console.log('checked');
            getSubsAj('mail');
          });
      }
    }
  };
})(jQuery);

Answer 2

I solve problem with this method in my js file :

instead of

 (function ($) {
Drupal.behaviors.tgdev = {
    attach: function (context, settings) {
      $(document).ready(function(){
            if($('#edit-field-images .image-preview').length==0){
            $('.form-item-field-feature-und-email .iCheck-helper ').on('click', function () {
                  if($(this).parent('.icheckbox_line').hasClass('checked')) {
                  console.log('checked');
                     getSubsAj('mail');
             });
             }
        console.log($('#edit-field-images .image-preview').length);
        });
      }
    };
})(jQuery);

I use

 (function ($) {
     $(document).ready(function(){
            if($('#edit-field-images .image-preview').length==0){
            $('.form-item-field-feature-und-email .iCheck-helper ').on('click', function () {
                  if($(this).parent('.icheckbox_line').hasClass('checked')) {
                  console.log('checked');
                     getSubsAj('mail');
             });
             }
        console.log($('#edit-field-images .image-preview').length);
        });
})(jQuery);

and everything work correctly !!!