DOM, Jquery обновление дерева при добавлении AJAX ом элемента
Суть том, что есть ф-ция перерасчета определенной информации,
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
function registr_founders_financial_fract_count() {
var fracts = new Array();
fracts['left'] = new Array();
fracts['right'] = new Array();
var error = 0;
var fract_left_count = 0;
var fract_right_count = 0;
$('#founders_wrapper .founder').each(function(){
fracts['left'].push(Number($(this).find('.founders_financial_part_type_row1').val()));
fracts['right'].push(Number($(this).find('.founders_financial_part_type_row2').val()));
});
// проверяет правильность заполнения делителей
for (var i in fracts['right']) {
if (i>0 && fracts['right'][(i-1)]!==fracts['right'][(i)]) {
// выдать сообщение об ошибке, что делители разные у разных строк
error = 1;
$('#founders_capital_parts_fract_error').css('display','');
registr_founders_financial_submit_block(true);
}
else {
fract_right_count = fracts['right'][(i)];
}
fract_left_count = fract_left_count + fracts['left'][i];
}
if (fract_left_count !== fract_right_count) {
// выдать сообщение о неравном количестве долей
$('#founders_capital_parts_fract_error').css('display','');
registr_founders_financial_submit_block(true);
error = 1;
}
if (error==0) {
$('#founders_capital_parts_fract_error').css('display','none');
registr_founders_financial_submit_block(false);
}
if ((fract_left_count / fract_right_count)==1) {
$('#founders_capital_parts_fract_error').css('display','none');
registr_founders_financial_submit_block(false);
return true;
}
else return false;
}
Запускается при изменении информации в поле таким образом:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
$('#founders_wrapper .founder').each(function(){
$(this).find('.founder_percent input').change(function(){registr_founders_financial_parts_recount();});
});
При статичных элементах все работает прекрасно, а при добавлении элемента в таблицу AJAXом - скрипт не реагирует на изменение только что добавленого поля, соответственно, после сохранения и нового открытия - поле обрабатывается, в чем дело и как обновить DOM дерево для того, что бы нужный input обрабатывался?
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
function registr_founders_financial_fract_count() {
var fracts = new Array();
fracts['left'] = new Array();
fracts['right'] = new Array();
var error = 0;
var fract_left_count = 0;
var fract_right_count = 0;
$('#founders_wrapper .founder').each(function(){
fracts['left'].push(Number($(this).find('.founders_financial_part_type_row1').val()));
fracts['right'].push(Number($(this).find('.founders_financial_part_type_row2').val()));
});
// проверяет правильность заполнения делителей
for (var i in fracts['right']) {
if (i>0 && fracts['right'][(i-1)]!==fracts['right'][(i)]) {
// выдать сообщение об ошибке, что делители разные у разных строк
error = 1;
$('#founders_capital_parts_fract_error').css('display','');
registr_founders_financial_submit_block(true);
}
else {
fract_right_count = fracts['right'][(i)];
}
fract_left_count = fract_left_count + fracts['left'][i];
}
if (fract_left_count !== fract_right_count) {
// выдать сообщение о неравном количестве долей
$('#founders_capital_parts_fract_error').css('display','');
registr_founders_financial_submit_block(true);
error = 1;
}
if (error==0) {
$('#founders_capital_parts_fract_error').css('display','none');
registr_founders_financial_submit_block(false);
}
if ((fract_left_count / fract_right_count)==1) {
$('#founders_capital_parts_fract_error').css('display','none');
registr_founders_financial_submit_block(false);
return true;
}
else return false;
}
Запускается при изменении информации в поле таким образом:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
$('#founders_wrapper .founder').each(function(){
$(this).find('.founder_percent input').change(function(){registr_founders_financial_parts_recount();});
});
При статичных элементах все работает прекрасно, а при добавлении элемента в таблицу AJAXом - скрипт не реагирует на изменение только что добавленого поля, соответственно, после сохранения и нового открытия - поле обрабатывается, в чем дело и как обновить DOM дерево для того, что бы нужный input обрабатывался?
1 ответов
1) попробуйте вместо change обработчик on
2) и еще: событие change происходит не непосредственно в момент изменения, а только при потери фокуса измененного элемента формы.
Решил проблему тем, что вставил вызов функции в момент добавления элемента на страницу - проблема решилась.