Why I can't get the elements with the same class content?

Question

I have a modal

<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="addModal">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="">ADD New User</h4>
            </div>
            <div class="modal-body">
              <form method="POST">
                <div class="form-group">
                  <label for="name" class="control-label">Name:</label>
                  <input type="text" class="form-control" id="name">
                </div>
                <div class="form-group">
                  <label for="location" class="control-label">Location:</label>
                  <input type="text" class="form-control" id="location" >
                  <div id="location-results"></div>
                </div>
                <div class="form-group">
                  <label for="website" class="control-label">Website:</label>
                  <input type="text" class="form-control" id="website" >
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" id="create" name="create" >ADD</button>
            </div>
          </div>
        </div>
    </div>

Then when I type something in the input with id=location some data will be inserted into the div with id='location-results' beneath the location input , I use Ajax to get the locations from locations table in the Database .

function findLocation(){
     //Get the Value From Location Search Input.
    var locationQuery = $('#location').val();
    //Send Ajax Request To findlocation.php File That Connects To The Locations Database And Return 5 `<p>` Elements With Location Name Inside Each `<p>`.
     $.ajax({ 
         url:"findlocation.php",
         type: 'POST',
         async: true,
         //Passing The Value From Location Search Input.
         data: {"locationQuery": locationQuery}, 
         success: function( data, textStatus, jQxhr ){
             //Insert Returned 5 `<p>` Elements Into The Div With ID location-results Beneath The Searching Input.
             $('#location-results').html( data  ); 
         }

    });
}
//Run findLocation (The Function Above) on Specific Events.
$( "#location" ).on('keyup input paste cut', findLocation);

The data back from the Ajax request looks like:

<p class="foundLocation" >First Place</p>
<p class="foundLocation" >Second Place</p>
<p class="foundLocation" >Third Place</p>
<p class="foundLocation" >Fourth Place</p>
<p class="foundLocation" >Fifth Place</p>

Then when I click one of the fetched location I should get the element content

//Select All Elements With Class foundLocation (The 5 p elements).
var found_locations = document.querySelectorAll('.foundLocation');
found_locations.forEach(function(el){
    //On Clicking On One Of The 5 `p` Elements.
    el.addEventListener('click', function(){
        //Insert Location Name Inside The Clicked `p` Element Into The Location Searching Input.
        $('#location').val(locationName);
    }); 
});

But when I click on one of the p elements with class='foundLocation' , Nothing happens , I even tried to console.log('some text'); inside the found_locations.forEach(function(el){ scope , But nothing is printed in the console.

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Taplar, Mar 08 '18 at 16:37
Why `.querySelectorAll()` and `.addEventListener()` when there's already jQuery? — Andreas, Mar 08 '18 at 16:39
@Andreas , I tried `$('.foundLocation').each(function(){` too but nothing happened — jack, Mar 08 '18 at 16:47
@SergeK. , Because I'm using Bootstrap and other Jquery Plugins. — jack, Mar 08 '18 at 16:47

score 0 · Answer 1 · answered Mar 09 '18 at 05:58

0

When you update the DOM using AJAX you have to bind the event to the inserted elements.Try this code.

$(document).on("click",".foundLocation",function(){
     $(this).val(locationName);
});

answered Mar 09 '18 at 05:58

Smit Raval

3,385
1
7
23

Why I can't get the elements with the same class content?

1 Answers1