Get the element after appending using Jquery or Javascript

Question

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");
      });
});

Do you get any errors in the console `? because it should work — Carsten Løvbo Andersen, Aug 16 '17 at 07:53
It works if panNumId is UNIQUE! and instead of $(document).on("click" use `$("#newDiv").on("click",'.panNumId'` and change to class instead of ID - of course newDiv ALSO has to be unique and loaded with the page — mplungjan, Aug 16 '17 at 07:53

score 1 · Accepted Answer · edited Aug 16 '17 at 08:12

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>

edited Aug 16 '17 at 08:12

mplungjan

169,008
28
173
236

answered Aug 16 '17 at 07:51

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

score 0 · Answer 2 · answered Aug 16 '17 at 07:53

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>

answered Aug 16 '17 at 07:53

Nirav Joshi

2,924
1
23
45

Yeah you are right the way you told me.But the problem is,Iam not getting the #panNumId element. – Amal lal T L Aug 16 '17 at 07:53
Why are you not getting? is there any error in your console? Please check it – Nirav Joshi Aug 16 '17 at 07:54
No.Iam not getting any error. – Amal lal T L Aug 16 '17 at 07:56

Get the element after appending using Jquery or Javascript

2 Answers2