按鍵在附加的HTML工作不

Question

<input type="text" id="message" param="1" placeholder="chat here.." /> 

這是是JavaScript

這裏外面做工精細的DIV中元素添加元素後的情況

$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <a href="#" id="chat'+id+'" onclick="inititate('+id+');" class="mega-link chat-initate-'+id+'" data-action="click-trigger"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> </a> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <a href="#"> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </a> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>'); 

現在，當我做

$('#message').keypress(function(event){ 

alert('WORKING'); 
}); 

警告（'工作'）只適用於當我在第一個元素中鍵入任何鍵後附加在一些c舔，如果我在附加的輸入框中輸入內容，我什麼也得不到，但爲什麼？

Answer 1

看看使用.on()或.live()取決於您的jQuery版本綁定到附加的元素。

$("div").on("keypress", "#message", function(){ 
    alert("working!"); 
}); 

其中div是#message父的選擇器。

Answer 2

這裏工作正常;

https://jsfiddle.net/mig1098/0rgd3ppu/

var id='one',img_url='http';//test values 

$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <a href="#" id="chat'+id+'" onclick="inititate('+id+');" class="mega-link chat-initate-'+id+'" data-action="click-trigger"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> </a> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <a href="#"> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </a> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>'); 

$('#message').keypress(function(event){ 
alert(event.keyCode); 
});