We Keep Coding

On click event not firing the first time on dynamically added elements via AJAX

I have a ul element that gets populated with li elements via AJAX.
Then I need to do something when clicking on those li elements.
The funny thing is that it works the second time I click on the li element it but not the first time.
I've read every possible related question I could find on StackOverflow but I can't find the answer to my problem.
Here is an example of the AJAX code:
$('#university').on('keyup', function(){
$.ajax({
url: ajaxUrl,
data: {
"search": searchVal,
"action": 'autoComplete',
},
type: "POST",
dataType: 'json',
success: function(data) {
$(".univers-name-list").html("");
var dataItem=[];
dataItem=data.data.items;
if(dataItem){
dataItem.forEach(function(element,key) {
$(".univers-name-list").append('<li>'+element.name+'</li>')
});
}
}
});
});
And here is the on click function (in the same file):
$('.univers-name-list').on('click', 'li', function(e){
// Code here
console.log('Helo'); // Doesn't run the first time.
});
Any idea what I'm doing wrong? Why does it only work when I click it for the second time?
Some more info:
When I checked the event target, the first time I click on any li element, the target is UL (populated with the dynamically added LI elements), but the second time is the correct LI element.

It was a custom validation rule on the input field that messed up everything.
After fixing that rule, it now works as expected.

Event listeners will not work fFor elements created dynamically via javascript.
You have to use delegate functions for these kind of elements
This code should work fine on you element created dynamically.
$(document).on('click', '.univers-name-list li', function(e){
// Code here
console.log('Helo');
});

You have to call addEventListener to the new created elements.
check this Attach event to dynamic elements in javascript

Attaching event to dynamic inserted button on page with jquery using .on()

I have a page where I return users posts, these posts can be commented on the fly using some jquery code, after a new comment is posted I insert the new comment under the post along with a Delete button. The problem is the Delete button doesn't work on the newly inserted element unless I reload the page. I read that the solution is using the .on() method however I am a little confused re how to implement this.
I have one function that updates the post part with the newly inserted comment and this is the function that deletes the comment:
$(document).ready(function () {
$("button[id*='deletecmnt_']").click(function () {
var id = this.id.replace('deletecmnt_', '');
var comment_card_id = ('#comment_' + id);
var token = $(this).data('token');
$.ajax({
url: '../comment/' + id,
type: 'post',
data: {_method: 'delete', _token: token},
success: function () {
// Checks for display of comment card and removes it
if ($(comment_card_id).is(":visible")) {
$(comment_card_id).fadeOut("fast");
}
}
})
})
});
I don't understand what needs to be changed here and how.

You need to use event delegation for elements added dynamically. In your .on() method, you need to add the selector that you want the handler attached to after it's created.
$(document).ready(function(){
$("body").on("click", "button[id*='deletecmnt_']", function () {
// codes
}
});
This will listen for clicks on elements not yet created that match your selector. Here's the JQuery API doc page for more info: http://api.jquery.com/on/

dynamic selectors added when a function is performed

I am echoing some php lines with some class id and need to be able to use them with jquery .click as the selector. Is there a way to do this?? The property is not loaded with everthing else, it is added later on by php.
play.js-
$(".link").click( function(){
/* var l = ""
$.post('input_commands/move_to.php',{l:l}, function(data) {
text=data;
elem = $("#placeholder");
//delay=100;
addTextByDelay(text,elem,delay);
}); */
alert("omg whyyyyy");
});
get_locations.php -
if($array_loc['loc_north']>0){echo "<a class='link' id='location_north'>Go north to ".$array_loc_north['loc_name']."</a> <br>";}

You need to use a delegated event because your elements are added to the DOM dynamically (or after the event handler is created).
$(document).on('click', '.link', function(){
console.log("clicked");
});
In the above, the event is delegated to the document and so all clicks will be checked against the .link selector, even if the target is an element that didn't exist when the event was delegated.

in order to bind an event to a dynamic element (one that was added after first DOM load),
replace:
$(".link").click( function(){
with:
$(document).on('click', '.link', function(){
hope that helps.

If it's added dynamically using ajax you might want to call that selector and append the .click() on the callback.
$.ajax({
url: '...',
success: function(response) {
// do stuff with response (assume that .link will be appended)
$(".link").click( function(){
//stuff when click link
}
}
});
Otherwise, you can output the links with the onclick attribute and define a custom function:
if($array_loc['loc_north']>0){echo "<a class='link' id='location_north' onclick='customFunction(this)'>Go north to ".$array_loc_north['loc_name']."</a> <br>";}
and in the JS:
function customFunction(element) {
//do stuff here after the link was clicked
//element variable passed as parameter contains the link element clicked
}
PS: If there are multiple elements it's not ok to specify constant value for "id" attribute because it should be unique.

Does Jquery have the ability to see ids in data passed back from $.get

I am using $.get to return some data:
$.get(url, function(data){
$("#searchResults").html(data);
});
When the data is returned it looks like this:
<div class="blah" cid="12344">12344</div>
I want to be able to click on this and read the CID:
$('.blah').click(function(){
$(this).attr('cid');
});
JQuery doesn't seem to handle this... am I right?

Using event delegation, you can just change
$('.blah').click(function() {
to
$('#searchResults').on('click', '.blah', function() {
and then you'll never have to remove or re-add this event handler.

You need to attach that specific event handler after inserting the HTML into the DOM.
$.get(url, function(data){
$("#searchResults").html(data);
$('.blah').unbind('click').click(function(){
$(this).attr('cid');
});
});

Reload Ajax/Javascripts afer .html() data load

So I have a page that loads the data into the page through the following ajax function.
$(document).ready(function(){
function loadData(page){
$.ajax
({
type: "POST",
url: "inc/load_data.php",
data: "p="+page+"XXXXXXXXXXX",
success: function(msg)
{
//alert(msg);
$("#container").ajaxComplete(function(event, request, settings)
{
$("#container").html(msg);
//**MODIFIED CODE
$(document).delegate('a.vote_up','click', f_vote_up);
});
}
});
}
});
//Loaded Message
$msg.='<span class="vote_buttons" id="vote_buttons'.$row['id'].'">
</span>';
The message that is loaded has some links that need to work with a another Ajax function(given below), which is apparently not working. The second function(below) is loaded before the data is loaded into the page. I suspect, may be since this function is loaded way before the data is loaded, the second function is not recognizing the click on vote_up. Is there any way to fix it??? I'm not too familiar with AJAX, I would really appreciate some help.. Thank you
$(function(){
$("a.vote_up").click(function(){
//get the id
alert("Hi");
//REST OF THE CODE
}
//***NEW FUNCTION
function f_vote_up(){
//get the id
the_id = $(this).attr('id');
//REST OF THE CODE
$("span#vote_buttons"+the_id).html("Hello, Testing Response!");
alert("End of Func!"); // <
}

When you call that second function, it's only grabbing all the a.vote_up elements that currently exist on the page. When you add more links to the page later on, they don't know to listen for the click.
You can do one of two things to fix this:
Add the click listener to each new link when you add it to the DOM. But this is a bit of work, because you'd have to change how your AJAX function builds the links, and you'd have to turn that click-listener-assigning function into something standalone that you could use at any time.
Instead of doing using the click method, use the delegate method instead:
$(document).delegate('a.vote_up', 'click', function () { ... });
More info on event delegation with jQuery.

you should bind your click event after you load the html
$.ajax
({
type: "POST",
url: "inc/load_data.php",
data: "p="+page+"XXXXXXXXXXX",
success: function(msg)
{
//alert(msg);
$("#container").ajaxComplete(function(event, request, settings)
{
$("#container").html(msg);
$("a.vote_up").click(function(){
//get the id
alert("Hi");
//REST OF THE CODE
});
});
}
});

You can use the live function to bind an event to dynamically created elements, i.e.:
$("a.vote_up").live('click', function(){
//get the id
alert("Hi");
});
http://api.jquery.com/live/
This will effectively bind this click event to all elements which match the a.vote_up selector, now and in the future.