We Keep Coding

Anchor tag click events not working after displaying the data using ajax [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
When I reload the page, I call ajax to get the data and display it on the screen.
<div class="empList"><ul></ul></div>
<script>
$(document).ready(function() {
$.ajax({
url: 'process.php',
method: 'post',
dataType: "json",
data: {
action: "employeelist"
},
success: function(data) {
var trHTML = '';
$.each(data, function(i, item) {
trHTML += '<li><div class="employeeShareWrap">Share</div></li>';
});
$('.empList ul').append(trHTML);
}
})
});
//clicking on the share button
$(".employeeShareWrap>a").click(function(e) {
e.preventDefault();
console.log('hi');
alert("hello");
});
// this is the second way i tried
/*
$(".employeeShareWrap>a").click(function(){
var otherInput=$(this).data("id");
alert(otherInput);
alert("hello");
});*/
<script>
As of now, I am displaying the share button for testing purposes. Now My issue is when I am clicking on the share button then I am not getting any alert. There is no error in the console.
And if I added directly in the HTML then it's working.
<li><div class="employeeShareWrap">Share</div></li>
<script type="text/javascript">
$(".employeeShareWrap>a").click(function(e){
e.preventDefault();
console.log('hi');
alert("hellow");
});
</script>
Is there any issue with my script or I am displaying it in a wrong way?

This is because the anchor tag hasn't been created yet, by the time you try to attach your listener to it. Consider using the on method instead:
$(document).on('click', '.employeeShareWrap > a', function(e){
e.preventDefault();
console.log('hi');
alert("hellow");
});

jQuery Click Handler with Called Ajax Sub-Method has a strange delay on $(this).prop('disabled', true) [duplicate]

This question already has answers here:
updated UI not showing before sync ajax call
(2 answers)
Closed 3 years ago.
I have a strange situation where the following Click-Handler (via one() to prevent double-clicks) has a called Ajax method from the inside. The first thing it's supposed to do is to disable my button.
Normally, if I don't have any Ajax inside and just have a simple click handler, this works and disables the button immediately:
$('#button').one('click', function (event) {
$(this).prop('disabled', true);
});
But if I have the following, with a called sub-method which involves Ajax, I notice that the 1st statement (Disable Button) does not occur until the sub-method is complete. But why? The button should get disabled immeditely as the first statement, regardless of how long the Ajax takes to complete.
$('#submitButton').one('click', function (event) {
$(this).prop('disabled', true); // Doesn't get disabled until AFTER submitSurvey()
submitSurvey(); // Call some method that does Ajax
});
function submitSurvey() {
$.ajax({
url: 'surveyProcess',
type: 'post',
processData: false,
contentType: false,
data: formData,
async: false, /* Note async = false, so nothing asynchronous here either */
success: function() {
//...
}
What could be going on here? I just need to disable the button immediately, without any delay.

You can use beforeSend() event for the same use
$('#submitButton').on('click', function (event) {
$.ajax({
url: 'surveyProcess',
type: 'post',
processData: false,
contentType: false,
data: formData,
async: false, /* Note async = false, so nothing asynchronous here either */
beforeSend: function(){
$(this).prop('disabled', true);
},
success: function() {
//...
}
});
});

Onchange doesnt do anything [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I have a select, lets call it A. When i choose an option from A, with ajax, i load an another select with options into a div. Lets call this second select B.
I have some ajax onchange code on B, but it does nothing, and it gives no error also.
I think, the "site doesnt see the B select", because it isnt in the source code, ajax loads it into a div.
What would be the solution for this?
$('#fizetes_select').on('change', function() {
var SelectedValue = this.value;
if(SelectedValue != 0 )
{
$.ajax({
type: 'POST',
url: 'files/get_fizetes_text.php',
data: { id: SelectedValue },
dataType: "html",
cache: false,
beforeSend: function(){
$('#preloader_fizetes').show();
},
success: function(data)
{
var result = $.trim(data);
$('#fizetes_result').html(result);
},
complete: function(){
$('#preloader_fizetes').hide();
}
});
}
return false;
});
Thats the onchange code for the B select, i only want to display some text with it. The ID-s are correct, i didnt write it bad, i chekced. Its in document ready.

Are you sure #fizetes_select isn't entering the DOM after this .on() declaration?
Try using document event binding with a targeted element instead.
$(document).on('change', '#fizetes_select', function(e) {
// do your thing here
});

javascript function stops working after div refresh [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
$(function() {
$(".reqdeb").click(function() {
console.log("Working");
var req_id = $(this).attr("id");
var info = 'id=' + req_id;
if (confirm("Are you sure you want to delete this request?")) {
$.ajax({
cache : false,
type : "POST",
url : "del_req.php",
data : info,
success : function() {
}
});
$(this).parents("tr").animate("fast").animate({
opacity : "hide"
}, "slow");
}
return false;
});
});
This is the code that stops working after a few tries of pressing the button and the code that causes it to stop working is this:
function autoRefresh_div(){
$("#refresh").load("reqs.php");
$("#nrref").load("numreq.php")
}
setInterval('autoRefresh_div()', 5000);

Seems you are replacing the existing elements thus event handlers are also removed. You can use .on() method with Event Delegation approach.
General Syntax
$(document).on('event','selector',callback_function)
Example
$(document).on('click', ".reqdeb", function(){
//Rest of your code
});
In place of document you should use closest static container for better performance.

Append jQuery working but onclick is not working [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have filter for producttypes which is getting created as per enteries in database via ajax:
HTML Part:
<ul id="foodtype"></ul>
Ajax Code to show filter:
function showtypes(){
$.ajax({
type: "POST",
url: "ajax/incl/showtype",
data:'',
dataType : 'json',
cache: false,
success: function(records1){
$('#foodtype').html(makefoodType(records1));
}
});
}
function makefoodType(data1){
var tbl_body = "";
$.each(data1, function() {
var tbl_row = "",
currRecord = this;
$.each(this, function(k1 , v1) {
tbl_row += "<li><input type=checkbox id="+v1+" name="+v1+" />
<span style=font-size:14px>"+v1+"</span></li>";
})
tbl_body += tbl_row;
})
return tbl_body;
}
The categories are getting displayed properly but when i select checkbox then following code needs to be executed
function getFilterOptions(){
var opts = [d,de];
$checkboxes.each(function(){
if(this.checked){
opts.push(this.id);
}
return opts;
}
var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
var opts = getFilterOptions();
updateProducts(opts);
});
I want the ID of checkbox to be pushed to page having php code. But nothing is happening on checking checkbox.
Note: When i view source code then <ul id="foodtype"></ul> code remains inact.. No <li> elements are displayed :(

You need to use something called event delegation. Listen on the click events on the container where checkboxes are. So after you add them dynamically, the click event will get bubbled to the container.

That's because var $checkboxes = $("input:checkbox"); is getting executed before ajax is complete and hence no elements.
Change to
$(document).on("change", "input:checkbox", function() {
var opts = getFilterOptions();
updateProducts(opts);
});
and it should work.