0

using jquery i am adding new elements to a div element i also have set id of new added element but still javascript can not find that newly added elements.

$.ajax({  //ajax call
    type: "POST",       
    url: "ajax/ajax.php", 
    data: { users: values }
}).done(function( msg ) {
    //do something with msg which is response
    //this line will put the response to item with id `#txtHint`.
    $("#divselect").html(msg)
    //alert(msg);
});
});

new elements added successfully but on button click javascript can not find that new element id. is there any way to reload only javascript or what should i do ?

     $("#validator").click(function (){//validator is my submit button id

     var value = document.getElementById('select_division'); //select_division is id of my new added element
     alert(value);
 }

then comes reference error. on this.

Spoody
  • 2,852
  • 1
  • 26
  • 36
ShababQaisar
  • 9
  • 3
  • 2
    IDs should be unique. It's possible that you're creating multiple elements with the same ID! – ibrahim mahrir Feb 08 '17 at 17:32
  • And the other case is creating element after even handler delegation. If so you need to read delegated event: parent.on('click', '$(createdEl), function(){}); – Daniel Feb 08 '17 at 17:46
  • If an answer solved your problem, consider accepting the answer. Here's how http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work then return here and do the same with the tick/checkmark till it turns green. This informs the community, a solution was found. Otherwise, others may think the question is still open and may want to post (more) answers. You'll earn points and others will be encouraged to help you. *Welcome to Stack!* – Jay Blanchard Feb 15 '17 at 16:19

2 Answers2

0

jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM are unrecognized by jQuery. To combat the problem use event delegation, bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally you should delegate to the nearest parent existing at the time of page load.

In addition, ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.

Change your selectors (switching from jQuery to vanilla JS is really not necessary since you're already using jQuery) to classes and use on() to perform the event delegation:

$(document).on('click', '.validator', (function (){//validator is my submit button id
    var value = document.getElementsByClassName('select_division'); //select_division is id of my new added element
    alert(value);
})

Part of the problem here is you will want a specific select_division related to your validator. In order to get that you may to perform some DOM traversal. Without seeing your markup I cannot tell you how to do the traversal.

Community
  • 1
  • 1
Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
-1

problem solved i was writing wrong. it can not be done with 

$("#elementid").click(function (){//v

it only works with

var value = document.getElementById('elementid').value;

thanks for helping

ShababQaisar
  • 9
  • 3