HTML-элементы, сгенерированные Javascript - теперь не работают

Question

Я генерирую HTML-элементы, используя javascript. Я применил тот же класс ко всем элементам. У меня есть функция, которая будет выполняться, когда этот класс испытывает событие keyup.

Проблема в том, что моя функция не распознает элементы, созданные javascript.

Смотрите пример здесь ->jsFiddle

HTML

<p>Type in the box below, an alert will appear</p> 
    <input type='text' id='x' size='30' class='conv'/> 
    <br/><br/> 

    <button id='btn'>Now Click Me</button><br/><br/> 

    <div id='mainform'></div> 

JQuery

$(document).ready(function() { 
    $('button').click(function() { 
     var a = "<p>The boxes below have the same class, thus they should show the alert when you type</p><input type='text' size='30' class='conv' id='a0'/><br/>"; 
     var b = "<input type='text' size='30' class='conv' id='a1'/><br/>"; 
     $('#mainform').append(a + b);  
    }); 

    $('.conv').keyup(function() { 
     alert('it works'); 
    }); 

}); 

Answer 1

делегация Используйте событие (.conv Как добавляется динамически)

$('#mainform').on('keyup','.conv',function() { 
    alert('it works'); 
}); 

Demo --->http://jsfiddle.net/VxTh5/7/

• http://learn.jquery.com/events/event-delegation/

Answer 2

ли делегации событие.

$(document).on('keyup' ,'.conv',function() { 
     alert('it works'); 
    }); 

http://api.jquery.com/on/

Answer 3

Поскольку класс добавляется динамически, вам нужно использовать event delegation зарегистрировать обработчик событий

// New way (jQuery 1.7+) - .on(events, selector, handler) 
$('#mainform').on('keyup', '.conv', function(event) { 
    event.preventDefault(); 
    alert('it works'); 
}); 

Это Приложить событие к любому входу в #mainform элемента, уменьшая объем проверки всего дерева элементов document и повышения эффективности.

Answer 4

Причина, по которой она не работает, потому что ваш элемент не существует в DOM, поэтому, когда вы вызываете обработчик, он не находит эти элементы. Делегация событие связывает событие щелчка к элементу, который существует:

$("#mainform").on('keyup', '.conv', (function() { 
    alert('it works'); 
}); 

Мы используем #mainform, поскольку он существует в DOM готов. Вы также можете использовать document, однако это очень широкий обработчик кликов.

Answer 5

вам необходимо связать событие после добавления созданного DIV, следовательно, переместить код привязки внутри события нажатия кнопки

$(document).ready(function() { 
    $('button').click(function() { 
     var a = "<p>The boxes below have the same class, thus they should show the alert when you type</p><input type='text' size='30' class='conv' id='a0'/><br/>"; 
     var b = "<input type='text' size='30' class='conv' id='a1'/><br/>"; 
     $('#mainform').append(a + b); 
     $('.conv').keyup(function() { 
      alert('it works'); 
     }); 

    }); 
});