access jquery element after append function using jquery

Question

How to get click event of the <a> tag using jquery when i access click event it is not accees please help.

This is my script to add data using append method

$.ajax({
  type: "POST",
  url: URL,
  data: datastring
}).done(function(data) {

  var status = JSON.parse(data);
  for (var i in status) {
    $("#loadmystatus").append(
      "<div style='float: right; margin-top: 5px;'>" +
      "<label style='font-weight: 500;' class='lblsizr'>2:45 am 02/04/2016</label>" +
      "<div class='dropdown user-menu' style='margin-right: 16px;'>" +
      "<button class='iconsiz' id='dd-user-menu' type='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>" +
      "<img src='image/icon/menu option.png' alt='' style='height: 6px; margin-left: 8px;'>" +
      "</button>" +
      "<div class='dropdown-menu dropdown-menu-right' aria-labelledby='dd-user-menu'>" +
      "<a class='make dropdown-item' name='make' id='make'>" +
      "<span class='font-icon glyphicon glyphicon-thumbs-up'></span>" +
      "Make current status" +
      "</a>" +
      "<a class='dropdown-item' href='#'>" +
      "<span class='font-icon glyphicon glyphicon-remove'></span>" +
      "Remove" +
      "</a>" +
      "</div>" +
      "</div>" +
      "</div>" +
      "<br>" +
      "<div style='border-radius: 10px;'>" +
      "<label>" + status[i].userstatus + "</label>" +
      "</div>" +
      "<hr>"
    );
  }
});

this is my scritp to access tag even did nt work

<script type="text/javascript">
$(document).ready(function()
{
   $('#make').on('click', function(event) {
   alert("hello");
});
});

please help for that

`$("#loadmystatus").on('click', "#make", function(){ alert(.....) });` — Satpal, Jan 20 '17 at 05:55
you can call same js file by using following function $.getScript("Js/custom.js"); or you can right code in function and call it at end of you ajax response. — Vivek Parmar, Jan 20 '17 at 06:01
just FYI, with ES6 we don't need to concatenate multiline strings anymore :) — Sergio Alen, Jan 20 '17 at 06:05

Niyoko · Answer 1 · 2017-01-20T05:59:11.957

4

You attach event handler to element that has not been created yet.

To solve your problem, you can attach event handler to document or #loadmystatus as Sergio suggested in the comment.

$(document).on('click', '#make', function(event) {
   alert("hello");
});

or

$('#loadmystatus').on('click', '#make', function(event) {
   alert("hello");
});

$(document).on("click", "#make", function(e){alert('test')});
$("#loadmystatus").append("<button id='make'>Click me!</button>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadmystatus"></div>

edited Jan 20 '17 at 05:59

answered Jan 20 '17 at 05:54

Niyoko

7,512
4
32
59

1

Instead of targeting the document I'd target `#loadmystatus`, otherwise the interpreter will have to traverse through the entire document to find the element – Sergio Alen Jan 20 '17 at 05:58
@SergioAlen I agree with you. – Niyoko Jan 20 '17 at 05:58
@NiyokoYuliawan You should not answer a basic question. There is a high possibility that its answered and you should look for it and mark it as duplicate. If you are not able to find, then its OK to answer but if then someone marks it dupe, you should remove your answer. Note, this is just my view of what I would have done. – Rajesh Jan 20 '17 at 06:03

access jquery element after append function using jquery

1 Answers1