CODEWITHSUNDEEP
javascriptjqueryhtmlcss
directory
directory

Reputation: 3167

Jquery remove background blink when click in same element

I've write the code below to set background on the row a user is editing. The problem I've is when the user clicks in the same row another input field, the function executes it self again and results in a repeat of the fadeOut and fadeIn.

What can I do or how can I check if the clicked element is still the same to prevent the 'each' loop to reset other form rows in case the have still a highlighted color?

$('body').click(function(e) {
        if ($(e.target).hasClass('form-row') || $(e.target).parents('.form-row').size()) { 
           $('.form-row').each(function(){
           $(this).animate({ backgroundColor:'#ffffff' }, 0);
           });
           $(e.target).parents('.form-row').animate({ backgroundColor:'#eff3f6' }, 350);
        } else { 
           $('.form-row').each(function(){
           $(e.target).parents('.form-row').animate({ backgroundColor:'#fff' }, 350);
           });
        }
    });

Many thanks!

Upvotes: 0

Views: 201

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

Try

jQuery(function ($) {
    $('body').click(function (e) {
        var $target = $(e.target),
            $row = $target.closest('.form-row');

        //if the row is already active don't do anything
        if ($row.hasClass('active')) {
            return;
        }

        //change the already active row
        $('.form-row.active').removeClass('active').animate({
            backgroundColor: '#ffffff'
        }, 0);
        $row.addClass('active').animate({
            backgroundColor: '#eff3f6'
        }, 350);;
    });
});

Demo: Fiddle

But if you are using jQuery UI then

jQuery(function($) {
  $('body').click(function(e) {
    var $target = $(e.target),
      $row = $target.closest('.form-row');

    //if the row is already active don't do anything
    if ($row.hasClass('active')) {
      return;
    }

    //change the already active row
    $('.form-row.active').removeClass('active', 0);
    $row.addClass('active', 350);
  });
});
.form-row {
  background-color: #ffffff;
}
.form-row.active {
  background-color: #eff3f6;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="form-row">Row 1</div>
<div class="form-row">Row 2</div>
<div class="form-row">Row 3</div>
<div class="form-row">Row 4</div>
<div class="form-row">Row 5</div>

Upvotes: 1

Fabjan
Fabjan

Reputation: 13676

Just store your rowIndex or row itself somewhere in code and give use it later:

var selectedRow = {};

$('body').click(function(e) {
        if(selectedRow.find(e.target).length > 0) return;
        selectedRow = $(e.target).parents('.form-row')[0];

        ... your logic here
        }
    });

not sure if this code works but it shows the idea ...

Upvotes: 0

Related Questions