CODEWITHSUNDEEP
javascriptjqueryhtml
Cris Anthony Barbosa
Cris Anthony Barbosa

Reputation: 21

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

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.

Upvotes: 1

Views: 83

Answers (4)

Heretic Monkey
Heretic Monkey

Reputation: 12115

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.

Upvotes: 0

ToX 82
ToX 82

Reputation: 1074

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/

Upvotes: 2

Vanojx1
Vanojx1

Reputation: 5584

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??

Upvotes: 0

guest271314
guest271314

Reputation: 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');
});

Upvotes: 1

Related Questions