Функция вызывается несколько раз

[KiberQ]

Всем привет, имеется код:

function showEdit(param) // Функция для отображения редактируемого поля
{
    x = param.id.replace(/[a-z]/ig, '');
    readOnly(x, false);
    
    document.getElementById(param.id).onkeydown = function (e) { //ENTER
    e = e || window.event;
    
        if (e.keyCode === 13) 
        {
            readOnly(x, true);
            editColumns(x); 
        }
    }
    
    $("input").blur(function(){
                editColumns(x);
        readOnly(x, true); 
    });
    
    $("textarea").blur(function(){
        editColumns(x);
        readOnly(x, true); 
    });
    
    return false;
}

Данная функция вызывается при двойном клике по input. Внизу у меня blur (если пользователь ввел что-то в поле, а после поле потеряло фокус, то вызывается функция editColumns, которая ведет уже на php скрипт. Проблема в том, что функция вызывается несколько раз, подозреваю, дело в том, что я неправильно прописываю blur (может, нужна какая-та проверка?). Если повесить в данный код alert, alert выпрыгнет раза 3-5, что я делаю не так?

Пробовал делать так:

$("textarea").focusout(function(){
		alert('qwe');
		// editColumns(x);
		// readOnly(x, true); 
    });

сначала алерт вызывается 1 раз, потом при следующем двойном клике - 2 и так дальше и дальше.

[KiberQ]

Пробовал сделать так:

$("input").one("focusout", function(){
		alert('ewq');
		//readOnly(x, true); 
    });
	
	
	$("textarea").one("focusout", function(){
		alert('qwe');
		// editColumns(x);
		// readOnly(x, true); 
    });

но раз функция выбьет 1 алерт, при втором двойном клике два или три, и так рандомно выбивает то 1, то 5, то 3 и т.д.

[Manyasha]

KiberQ, здравствуйте.

Вынесите обработчики события blur за пределы функции showEdit.
Каждый раз, вызывая showEdit, Вы назначаете новый обработчик.

[KiberQ]

$("input").focusout(function(){
		alert('input');
    });

$("textarea").focusout(function(){
		alert('textarea');
    });	
	
function showEdit(param) // Функция для отображения редактируемого поля
{
	x = param.id.replace(/[a-z]/ig, '');
	readOnly(x, false);
	
	document.getElementById(param.id).onkeydown = function (e) { //ENTER
	e = e || window.event;
	
		if (e.keyCode === 13) 
		{
			readOnly(x, true);
				
		}
	}
	
	return false;
}

Вынес вне функций в js файл, теперь алерты вообще не появляются.

[Manyasha]

KiberQ,
ну, наверное, потому что элементы еще не загружены на страницу.
Используйте ready или load: https://jqbook.net.ru/jquery/Events1

[KiberQ]

Да, спасибо, помогло, так работает:

$(document).ready(function() {
	$('title#titleText').html("Договора");
	$("input").blur(function(){
                editColumns(x);
		readOnly(x, true); 
    });
	
	$("textarea").blur(function(){
		editColumns(x);
		readOnly(x, true); 
    });
});

Но теперь назревает следующий вопрос, а как в (document).ready передать теперь x без глобальной переменной?

[Manyasha]

KiberQ,
не поняла, что нужно...
Можете сделать исполняемый пример?

[KiberQ]

HTML
<инпут двойной клик = "showEdit(this)">

JS

function showEdit(param) // Функция для отображения редактируемого поля
{
	x = param.id.replace(/[a-z]/ig, ''); //Получаем id инпута
	readOnly(x, false); // Это нам не важно
	
	document.getElementById(param.id).onkeydown = function (e) { //ENTER
	e = e || window.event;
	
		if (e.keyCode === 13) 
		{
			readOnly(x, true);
                        editColumns(x); // При нажатии на enter сохраняем
				
		}
	}
	
	return false;
}

И, собственно, то, что Вы подсказали:

$(document).ready(function() {
	$('title#titleText').html("Договора");
	$("input").blur(function(){
		alert(x); //Тот самый x из showEdit
    });
	
	$("textarea").blur(function(){
		alert(x); //Тот самый x из showEdit
    });
});

[Manyasha]

KiberQ,
ну так Ваш вариант работает:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showEdit(param) // Функция для отображения редактируемого поля
{
    x = param.id.replace(/[a-z]/ig, ''); //Получаем id инпута
    console.log(x);
     
    return false;
}
$(document).ready(function() {
    $('title#titleText').html("Договора");
    $("input").blur(function(){
        alert(x); //Тот самый x из showEdit
    });
     
    $("textarea").blur(function(){
        alert(x); //Тот самый x из showEdit
    });
});
</script>
<textarea id="test1"></textarea>
<input type="text" id="test2" ondblclick="showEdit(this)">
<input type="text" id="test3" ondblclick="showEdit(this)">
</body>

Чем не нравится?

[KiberQ]

Так как выведется x, если он локальный, существующий только в функции showEdit?
alert(x); //Тот самый x из showEdit