Confirm несколько раз.
 

Здравствуйте. Я хочу сделать возможность редактировать текст в input text форме и после редактирования ajax запрос и смена текста в базе. Но у меня это не получается так, как я хочу. Вместо единичного вызова confirm, confirm у меня вызывается несколько раз, т.к. событие change срабатывает при отмене. В общем вот код:

$(".inputs_client").bind('dblclick', function() {
			$(this).css("backgroundColor", "red");
			$(this).css("color", "white");
			var textbefore = $(this).attr('value');
			this.readOnly = false;
			$(this).bind('change', function() {
					if (!confirm('Вы уверены?')) {
						$(this).attr('value', textbefore);
						textbefore = null;
					} else {
						$(this).attr('value', this.value);
						textbefore = null;
					}
				});
		});
		$(".inputs_client").bind('blur', function() {
			this.readOnly = true;
			$(this).css("backgroundColor", "white");
			$(this).css("color", "black");
		});

С каждым разом у меня на 1 раз больше вызывается команда confirm('Вы уверены?'). Помогите, пожалуйста, если вы поняли меня. А если не поняли, то поправьте, я всё объясню.

Дело в том что вы вешаете событие change каждый раз когда срабатывает событие dblclick. Вариантов два, либо снимать событие по окончанию редактирования, либо изначально вешать только один раз (вне функции).

Снимаем событие:

$(".inputs_client").bind('dblclick', function() {
            $(this).css("backgroundColor", "red");
            $(this).css("color", "white");
            var textbefore = $(this).attr('value');
            this.readOnly = false;
            $(this).bind('change.myEvent', function() {
                    if (!confirm('Вы уверены?')) {
                        $(this).attr('value', textbefore);
                        textbefore = null;
                    } else {
                        $(this).attr('value', this.value);
                        textbefore = null;
                    }
                    $(this).unbind('change.myEvent');
                });
        });
        $(".inputs_client").bind('blur', function() {
            this.readOnly = true;
            $(this).css("backgroundColor", "white");
            $(this).css("color", "black");
        });

Вешаем один раз:

$(".inputs_client").bind('dblclick', function() {
            $(this).css("backgroundColor", "red");
            $(this).css("color", "white");
            $(this).data('textbefore', $(this).attr('value'));
            this.readOnly = false;
        });
        $(".inputs_client").bind('blur', function() {
            this.readOnly = true;
            $(this).css("backgroundColor", "white");
            $(this).css("color", "black");
        });
$(".inputs_client").bind('change', function() {
                    if (!confirm('Вы уверены?')) {
                        $(this).attr('value', $(this).data('textbefore'));
                        textbefore = null;
                    } else {
                        $(this).attr('value', this.value);
                        textbefore = null;
                    }
                });

Примерно так.

Спасибо. Всё работает, всё понятно. Но, есть пара вопросов по следующим строчкам:

$(this).data("textbefore", $(this).attr('value'));

Зачем использовать этот метод? Он вроде делает такое же присвоение, только ещё события вещает дополнительные к этому объекту. Чем не устроил?

var textbefore = $(this).attr('value');

И вот ещё строчка мне не понятная:

$(this).bind('change.myEvent', function() {

Что ещё за "myEvent"?

Если сохранять в переменную, то ее пришлось бы делать глобальной (обращаться к ней же мы будем из одной функции, а создавать в другой)

Это как бы псевдоним нашего события, если его не использовать то будем снимать абсолютно все события change (мало ли может кто то тоже будет использовать это событие у этого элемента). Поэтому используем псевдоним, что бы работать только с нашим событием (называть вы его можете как хотите).

В документации все есть.