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

This is element inside the div which is working fine outside the javascript

here is the case after appended element

$('.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>');

Now when I do

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

alert('WORKING');
});

alert('working') only works when I type any key in the first element after the append is made on some click and if I type something inside that appended input box I get nothing but why?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
ujwal dhakal
  • 2,289
  • 2
  • 30
  • 50

2 Answers2

2

Look at using .on() or .live() depending on your jQuery version to bind to elements that are appended.

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

where div is the selector of a parent of #message.

Patrick Moore
  • 13,251
  • 5
  • 38
  • 63
  • NVM, I did not fully read through your sample code. Probably you have some JavaScript error that is preventing additional JS from executing. – Patrick Moore Aug 27 '15 at 16:25
  • working fine using inline keypress() function wouldnt my choice cnt run away from my problem .. @Set Sail Media now why m i getting multiple working on single click and whats the work of div? – ujwal dhakal Aug 27 '15 at 16:32
1

here work fine;

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);
});
miglio
  • 2,048
  • 10
  • 23