-1

i have a problem, i have js function to load data with ajax,after load ajax, i get some data so obviously elements are added to the DOM after ready handler is fired, it's html data

for example i want to load test.php : 

<button class='test' data-id='1' >SEND</button> //<--this data from test.php by ajax load

then i entered some script to external js :

$('.test').click(function(){
   var id = $(this).data('id');
   alert(id);
});

the script isn't work, but if i put internal javascript in test.php the script is work, i hope you understand and can help me

user3586378
  • 38
  • 7

2 Answers2

2

Delegate the event handler to an element that exists at the time of binding

$(document).on('click', '.test', function(){
   var id = $(this).data('id');
   alert(id);
});

Preferably you'd replace document with the closest non-dynamic parent (closest parent element not loaded with ajax)

adeneo
  • 293,187
  • 26
  • 361
  • 361
  • thank you , it's work, can you give me explanation about that @adeno – user3586378 May 04 '14 at 13:06
  • https://learn.jquery.com/events/event-delegation/ – adeneo May 04 '14 at 13:11
  • @user3586378 `can you give me explanation` I told you in comment to use google, why don't you start from here... PS: this kind of question is asked hundred times a week, so... – A. Wolff May 04 '14 at 13:14
  • @A.Wolff - I don't know how many of these "delegated handlers" questions I've answered, and I've voted to close even more. I usually answer when someone posts the wrong answer and if the question isn't an exact duplicate, which this is as I'm sure I've seen it worded almost exactly like this at least once before. – adeneo May 04 '14 at 13:23
  • @adeneo Of course my previous comment wasn't anything against people trying to help as you, but against people asking again and again without any effort to solve their own issue. And i usually upvote good answer which fit OP's needs just like here. And if OP is not a lazy guy, then all my apologies to him, but... – A. Wolff May 04 '14 at 13:27
  • @A.Wolff - Yeah, both "help vampires" and all the closed questions of lately are constantly being discussed on [**SO Meta**](http://meta.stackoverflow.com/questions/252506/question-quality-is-dropping-on-stack-overflow). If someone needs help and they clearly have no idea how to proceed, I try to answer or link to a duplicate. I don't really care how well the question is worded, if it's some interesting phenomenon never seen before etc. or just a simple typo, it makes no difference for me, and I don't really care that much about the rep either. – adeneo May 04 '14 at 14:13
  • http://meta.stackoverflow.com/questions/251758/why-is-stack-overflow-so-negative-of-late – adeneo May 04 '14 at 14:16
0

i think you forget about document ready 

$(document).ready(function(){ 
$('.test').click(function(){
   var id = $(this).data('id');
   alert(id);
});
};
underscore
  • 5,787
  • 4
  • 30
  • 72
  • 1
    `i have js function to load data with ajax,after load ajax i get data, it's html data` so obviously elements are added to the DOM after ready handler is fired EDIT: sorry looks like i misunderstand OP's issue but looks like question is unclear – A. Wolff May 04 '14 at 12:55
  • i put the script in ready function from external js – user3586378 May 04 '14 at 12:56