How to access html elements on .html() using Jquery?

Question

Here is where I want to add the html

 <div id="people">

This is my script and when the button is clicked its text will be change

 <script>
 $(document).ready(function(){
 $.ajax({
 type: "POST",
 url: "response1.php",
 dataType: "json",
 success: function(JSONObject) {
   var peopleHTML = "";

  // Loop through Object and create peopleHTML
  for (var key in JSONObject) {
    if (JSONObject.hasOwnProperty(key)) {
        peopleHTML += "<div class='col-lg-3 col-md-3 col-xs-3'   
   style='padding-top:10px;'>";
  peopleHTML += "<div class='box'>";
   peopleHTML += "<div class='row'>";
    peopleHTML += "<h3>" + JSONObject[key]["name"] + "</h3>";
    peopleHTML += "<div class='col-xs-12'>";
    peopleHTML += "<p>"+JSONObject[key]["gender"]+"</p>";   
    peopleHTML += "</div>";
    peopleHTML += "<button class='btn btn-primary' id='cris'>
   CLICK ME</button>";
    peopleHTML += "</div>";
    peopleHTML += "</div>";
    peopleHTML += "</div>";        }
  }

  // Replace table’s tbody html with peopleHTML

  $("#people").append(peopleHTML);

 $('#cris').click(function(){
event.preventDefault();
$(this).text('I CHANGE');
});
}
});

});
 </script>

How can I access the html elements I added so that the click function will work? I also used json to get my data's on database.

$('#cris').click(...) will work just fine. The issue may be that event is not defined. — Felix Kling
– Felix Kling, Commented Oct 7, 2015 at 16:07

ToX 82 · Accepted Answer · 2015-10-07 16:02:28Z

2

If the .on() method is not working, you can try with this:

$('body').on('click', '#cris', function(event) {
    event.preventDefault();
    $(this).text('I CHANGE');
});

This method should work no matter what, but using body is not the best option anyway: you are telling jquery to add a listener to the whole body... It would be better to use a narrower parent, like

$('.chrisparent').on('click', '#cris', function(event) {
    event.preventDefault();
    $(this).text('I CHANGE');
});

edit: here's the working code (without the ajax call): https://jsfiddle.net/a34poca9/

edited Oct 7, 2015 at 16:02

answered Oct 7, 2015 at 15:43

ToX 82

1,0841 gold badge13 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

guest271314 Over a year ago

event appear undefined at handler of either alternative ?

ToX 82 Over a year ago

Sorry I forgot to add the event parameter to the function... I've edited my answer.

Felix Kling Over a year ago

What's wrong with what the OP is using? $('#cris').click(function(){ ... });

ToX 82 Over a year ago

If it was just an undefined event problem then there is nothing wrong with his code, he was just missing to pass it as a parameter. If there is something more than what we can see in this post, then the event delegation approach has solved many problems to me.

Felix Kling Over a year ago

@ToX82: But blindly applying event delegation isn't a good approach either. The OP binds the event handler after the new content was added to the document, so using event delegation is not necessary.

guest271314 · Accepted Answer · 2015-10-07 15:47:07Z

1

event not defined as parameter within click handler anonymous function ?

$('#cris').click(function() {
  // `event` is `undefined` here
  event.preventDefault();
  $(this).text('I CHANGE');
});

, which would return error when reach event.preventDefault() ? Try adding event to click handler

$('#cris').click(function(event){
  event.preventDefault();
  $(this).text('I CHANGE');
});

answered Oct 7, 2015 at 15:47

guest271314

1

Comments

Vanojx1 · Accepted Answer · 2015-10-07 15:48:37Z

0

event delegation approach will work... a good event handler could be the nearest static parent element

$('#people').on('click', 'button#cris', function(e) {
    e.preventDefault();
    $(this).text('I CHANGE');
});

but if you bind the event just after $("#people").append(peopleHTML); this will work also with $('#cris').click. Ve you some console error based on undefined variable event??

answered Oct 7, 2015 at 15:48

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

1 Comment

Cris Anthony Barbosa Over a year ago

thanks for the answer and i think your answer is better since you are calling the button #cris on the #people and not on the whole body

Heretic Monkey · Accepted Answer · 2015-10-07 16:26:11Z

0

I suggest you use delegation for this. Code like this:

$(document).on('click', '#cris', function(e) {
  e.preventDefault();
  $(this).text('I CHANGE');
});

This will capture the click event on any element with the id "cris" no matter when or how they are created. Take care not to put this code within the $.ajax call.

Adding the event handler within the handler for the ajax response means that a new event handler will be created every time that ajax call succeeds, potentially leading to a memory leak and/or having the click event occurring multiple times. If you want to do that, you can add a call to $().off() before binding your click handler:

$('#chris').off('click').click(...

But that just seems like an extra step considering delegation will always pick up the event.

edited Oct 7, 2015 at 16:26

answered Oct 7, 2015 at 15:44

Heretic Monkey

12.2k7 gold badges63 silver badges133 bronze badges

1 Comment

Felix Kling Over a year ago

Why is that better than .click in this case?

Collectives™ on Stack Overflow

How to access html elements on .html() using Jquery?

4 Answers 4

5 Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related