由Javascript生成的HTML元素 - 现在不起作用

Question

我正在使用javascript生成HTML元素。我将同一个类应用于所有元素。我有一个函数，当这个类遇到keyup事件时，它会执行。

问题是我的功能没有识别JavaScript创建的元素。

看到这里的例子 - >jsFiddle

HTML（被动态地添加作为.conv）

<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

使用事件代表团

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

演示--->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元素中的事件附加到任何输入， 减少了检查整个元素树并提高效率的范围。

Answer 4

它不工作的原因是因为你的元素不存在于DOM就绪，因此当你的处理程序被调用时，它不会找到这些元素。事件代表团结合的Click事件到一个真实存在的元素：

$("#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'); 
     }); 

    }); 
});