-1

I have a <div>.I am trying to append another which contains a inside.I am trying to call the input tag by id, but am not getting this element! I tried many questions in the stack, but I can't solve this.

Here is the HTML code

<div id="newContDiv" class="form-group">
  <div id="newDiv"></div>
 </div>

jquery for appending div and input tag

 var v = "<div id = 'coverDiv'><div id='appDiv'><div><input id='panNumId' 
      type='text' name='panImg1' placeholder='Enter your Pancard number'/>
      </div></div>";
  $('#newDiv').append(v);

And I am calling the element as

$(document).ready(function(){
       ('#panNumId').click(function () {
        alert("clicked");
      });
});
Amal lal T L
  • 400
  • 5
  • 20

2 Answers2

1

Since your element is dynamically appended, you wont be able to handle a click event like you are doing. You will need to update your click event to:

$("#newDiv").on("click", "#panNumId", function(){
    // code goes here
});

Like this

$(function() {
  var v = "<div id = 'coverDiv'><div id='appDiv'><div><input id='panNumId' type = 'text'name = 'panImg1'placeholder = 'Enter your Pancard number' / ></div></div > ";
  $('#newDiv').append(v);

  // it will alert the moment you click the textfield
  $('#newDiv').on("click", "#panNumId", function() {
    alert("clicked");
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="newContDiv" class="form-group">
  <div id="newDiv"></div>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
N. Ivanov
  • 1,795
  • 2
  • 15
  • 28
  • Nop this one is not working here! – Amal lal T L Aug 16 '17 at 07:52
  • I had tried many ways in stack and event handlers also. – Amal lal T L Aug 16 '17 at 07:52
  • Yes,sure.But the problem here is,Iam not getting the #panNumId element to apply this event. – Amal lal T L Aug 16 '17 at 07:54
  • then it is likely not unique – mplungjan Aug 16 '17 at 07:54
  • I have added a code snippet to demonstrate this working, hope this helps @AMallal . Thanks! – N. Ivanov Aug 16 '17 at 07:59
  • Its now working fine.It is working with $('body')' finely.Thankyou Ivanov.It helped me very much. – Amal lal T L Aug 16 '17 at 08:14
  • I tried it using `$(document).ready();` but it didn't work in this situation.Why did `$(function() {}` worked fine? – Amal lal T L Aug 18 '17 at 05:50
  • 1
    @AMallal [Here](https://stackoverflow.com/questions/2662778/what-is-the-difference-between-these-jquery-ready-functions) is part of your answer. But why did one work and not the other, to be honest I am not sure. Maybe you had a mistake somewhere? maybe something was not being called correctly? If you provide me with your old code that is not working I might take a look, and try to find out why it was not working. Hope this helps! – N. Ivanov Aug 18 '17 at 07:34
  • Thanks for your help.Here in my code,I had just replaced `$(document).ready();` with `$(function)` .That all I have did,and it worked fine. No other changes were made. – Amal lal T L Aug 18 '17 at 07:41
  • @AMallal can you make a jsFiddle instead? I dont have time to recreate your situation. Sorry. Thanks! – N. Ivanov Aug 18 '17 at 07:42
0

You can do it like this.

Hope this will helps you :)

var v = "<div id = 'coverDiv'><div id='appDiv'><div><input id='panNumId' type='text' name='panImg1' placeholder='Enter your Pancard number'/></div></div>";
$('#newDiv').append(v);
$(document).on('click','#panNumId',function () {
   alert("clicked");
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="newContDiv" class="form-group">
    <div id="newDiv"></div>
 </div>
Nirav Joshi
  • 2,924
  • 1
  • 23
  • 45