Why doesn't the DOM-embedded object react to the function with innerHTML?

Question

JavaScript

Actually there is html in which there is a checkbox and I insert one more

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

with innerHTML :

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

It appears wonderfully on the page - but when you click on it, the action sent to the niceCheck selector for some reason does not happen with the added element, but the one that was on the page works successfully.

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;
}

Подскажите как правильно сделать добавление в документ чтобы яваскрипт обрабатывал вновь добавленные элементы?

Answer 1

Замените ф-ю:

jQuery(".niceCheck").mousedown(function() {
     changeCheck(jQuery(this));
});

На

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

И давно бы пора взять версию jQuery по новее и использовать .on.

Answer 2

Вы сперва добавляете обработчик для существующих элементов, а потом добавляете новые, и они уже без обработчика. .on() или .live() позволяют сделать примерно так:

$('body').on('click', '.niceCheck input', function(){
 // do something
})

Обработчик висит на body, например, и отлавливает клики и по старым и по новым элементам.

Answer 3

https://api.jquery.com/on/

Answer 4

jQ('#info').attr('innerHTML', text);
innerHTML ни разу не атрибут, то что у вас оно работало весьма странное стечение обстоятельств.
jQuery содержит специальные методы для добавления/изменения контента.
Ваш пример правильно будет написать так:
Ещё стоит посмотреть методы вроде append().