@vegarulez

Почему при innerHTML встроенный в DOM объект не реагирует на функцию?

Собственно есть html в котором есть чекбокс и я вставляю ещё один

<span class="niceCheck"><input type="checkbox" name="ch10" /> </span>
<div id="info" style="display:none">


с помощью innerHTML :

function addCheckbox(){
 			text='<span class="niceCheck"><input type="checkbox" name="ch11" /> </span>';
 			jQ('#info').attr('innerHTML', text);
 			jQ("#info").show();	
}


Он замечательно появляется на страничке - но при клике мышкой на нём действие повещанное на селектор niceCheck почему-то с добавленным элементом не происходит, а тот что был на страничке успешно работает.

jQuery(document).ready(function(){

jQuery(".niceCheck").mousedown(
/* при клике на чекбоксе меняем его вид и значение */
function() {

     changeCheck(jQuery(this));
     
});
jQuery(".niceCheck").each(
/* при загрузке страницы нужно проверить какое значение имеет чекбокс и в соответствии с ним выставить вид */
function() {
     changeCheckStart(jQuery(this));
});
                                        });
function changeCheck(el)
/* 
	функция смены вида и значения чекбокса
	el - span контейнер дял обычного чекбокса
	input - чекбокс
*/
{
     var el = el,
          input = el.find("input").eq(0);
   	 if(!input.attr("checked")) {
		el.css("background-position","-100px 0");	
		input.attr("checked", true)
	} else {
		el.css("background-position","0 0");	
		input.attr("checked", false)
	}
     return true;
}
function changeCheckStart(el)
/* 
	если установлен атрибут checked, меняем вид чекбокса
*/
{
var el = el,
		input = el.find("input").eq(0);
      if(input.attr("checked")) {
		el.css("background-position","-100px 0");	
		}
     return true;
}


Подскажите как правильно сделать добавление в документ чтобы яваскрипт обрабатывал вновь добавленные элементы?
  • Вопрос задан
  • 240 просмотров
Решения вопроса 1
Замените ф-ю:
jQuery(".niceCheck").mousedown(function() {
     changeCheck(jQuery(this));
});

На
jQuery('.niceCheck').live('click', function () {
changeCheck(jQuery(this));
});

И давно бы пора взять версию jQuery по новее и использовать .on.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Stalker_RED
@Stalker_RED
Вы сперва добавляете обработчик для существующих элементов, а потом добавляете новые, и они уже без обработчика. .on() или .live() позволяют сделать примерно так:
$('body').on('click', '.niceCheck input', function(){
 // do something
})

Обработчик висит на body, например, и отлавливает клики и по старым и по новым элементам.
Ответ написан
Sanasol
@Sanasol Куратор тега JavaScript
нельзя просто так взять и загуглить ошибку
Ответ написан
Комментировать
nazarpc
@nazarpc
Open Source enthusiast
jQ('#info').attr('innerHTML', text);
innerHTML ни разу не атрибут, то что у вас оно работало весьма странное стечение обстоятельств.
jQuery содержит специальные методы для добавления/изменения контента.
Ваш пример правильно будет написать так:
jQ('#info').html(text);
Ещё стоит посмотреть методы вроде append().
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы