.click() doesn't work with ajax loaded content


good guy

I have a datatable that fetches data from my server using AJAX.

This code adds data to the datatable and also adds some buttons to it

                var jsdata = JSON.parse(data);
                for (var i = 0; i < jsdata.length; i++) {
                    var actions =
                            '<div class="btn-group">' +
                                '<button class="btn btn-default btn-xs" type="button" data-button=\'{"func": "func1"}\' data-process_id="' + jsdata[i][0] + '"><i class="icon-remove"></i> </button>' +
                            '</div>';
                    jsdata[i].push(actions);
                }

I also have this code that should click the button created (via the script above)

$('button').click(function() {
    alert('test');
});

Unfortunately, these functions are not called. If I put the button directly (no AJAX request) it works fine.

How can I fix this problem?

Kevin Bowzox

Using attached event handlerson

$(document).on("click", "button",function() {
    alert('test');
});

Related


Form in Ajax loaded content doesn't work

who dr I have a page that loads content from other files (content.php)into a div that reloads every 5 seconds. In the content.php file I am using a form (simple HTML without javascript). When I access the file directly, (example.com/content.php)the form works,

Length doesn't work for ajax loaded content

Rayhan Porohit Here is my HTML <li><a class="tab-click" href="#tab-4" data-tab-current="about-us">About Us</a></li> Here is my jQuery code $(document).on('click', '.tab-click a', function(event) { if($('.s-tab').length) { event.prev

Show Bootstrap tab loaded with Ajax on first click doesn't work

dirty encoder I am trying to load the content of a given tab using Ajax. I'm rendering the first tab active on the server, and the other tabs are active and loaded using Ajax. The problem I've isolated (without Ajax) is here . HTML: <h1>Hello, tabs!</h1> <div

JQuery Click handler doesn't work after Ajax page is loaded

Adam 78 I have an ASP MVC application in which I have a partial view that is loaded via ajax every time a new annotation is added. However, after the ajax page loads, the jQuery click handler doesn't work anymore. <div id="comments"> // Jquery links don't

Show Bootstrap tab loaded with Ajax doesn't work on first click

dirty encoder I am trying to load the content of a given tab using Ajax. I'm rendering the first tab active on the server, and the other tabs are active and loaded using Ajax. The problem I've isolated (without Ajax) is here . HTML: <h1>Hello, tabs!</h1> <div

jQuery focus doesn't work in Ajax loaded content

hairy I am trying to focus on an element generated using the ajax .loadmethod . DesignHome.aspx <!-- All Jquery Scripts Go Here --> <script src="../../Scripts/angular.min.js?v=7" type="text/javascript"></script> <script type="text/javascript"> var app = an

jQuery focus doesn't work in Ajax loaded content

hairy I am trying to focus on an element generated using the ajax .loadmethod . DesignHome.aspx <!-- All Jquery Scripts Go Here --> <script src="../../Scripts/angular.min.js?v=7" type="text/javascript"></script> <script type="text/javascript"> var app = an

jQuery autocomplete plugin doesn't work in Ajax loaded content

Gautamja jQuery demo page I'm having trouble getting auto-suggestions of countries for AJAX loaded content. in those ajax loaded forms. I searched everywhere for a solution to this problem, but I got some info about an autosuggest form server. I don't have a S

jQuery focus doesn't work in Ajax loaded content

hairy I am trying to focus on an element generated using the ajax .loadmethod . DesignHome.aspx <!-- All Jquery Scripts Go Here --> <script src="../../Scripts/angular.min.js?v=7" type="text/javascript"></script> <script type="text/javascript"> var app = an

Unobtrusive JavaScript doesn't work with AJAX loaded content

null I am facing very strange thing AJAXand Unobtrusive JavaScriptI have two pages ajaxcontent.php index.php index.php has <div id="cont"></div> <input type="button" id="a" value="load plz."> <script type="text/javascript"> document.getElementById('a').on

jQuery focus doesn't work in Ajax loaded content

hairy I am trying to focus on an element generated using the ajax .loadmethod . DesignHome.aspx <!-- All Jquery Scripts Go Here --> <script src="../../Scripts/angular.min.js?v=7" type="text/javascript"></script> <script type="text/javascript"> var app = an

jQuery focus doesn't work in Ajax loaded content

hairy I am trying to focus on an element generated using the ajax .loadmethod . DesignHome.aspx <!-- All Jquery Scripts Go Here --> <script src="../../Scripts/angular.min.js?v=7" type="text/javascript"></script> <script type="text/javascript"> var app = an

Unobtrusive JavaScript doesn't work with AJAX loaded content

null I am facing very strange thing AJAXand Unobtrusive JavaScriptI have two pages ajaxcontent.php index.php index.php has <div id="cont"></div> <input type="button" id="a" value="load plz."> <script type="text/javascript"> document.getElementById('a').on

jQuery click doesn't work but jQuery is loaded

DazDylz I don't understand why this jQuery script doesn't work; $( "#send" ).click(function() { console.log("ee"); }); console.log("test"); When the page loads, I see "Test" in the console, so the jQuery page is loaded. But when I click #send it won't wo

jQuery click doesn't work but jQuery is loaded

DazDylz I don't understand why this jQuery script doesn't work; $( "#send" ).click(function() { console.log("ee"); }); console.log("test"); When the page loads, I see "Test" in the console, so the jQuery page is loaded. But when I click #send it won't wo

AJAX submit won't work if contact form is in AJAX loaded content

Marco Marsala If the AJAX loaded content contains a CF7 contact form, the AJAX submission will not work for that form. The suggested workaround is to put this line in the Contact Form template: <script src="/wp-content/plugins/contact-form-7/includes/js/script

.click function doesn't work in ajax POST

tomanford I have two scripts running on the page and they work independently but not together. The first part of the script is an ajax POST which selects rows from my database based on a search. All of these are displayed in a modal window. The second script w

Ajax call doesn't work in click() in Javascript

gls I am trying to dynamically update my page using ajax and php. The call was working fine until the ajax call was put into the click() function. Alarm is OK $(document).ready(function(){ $("#formbutton").click(function(){ alert("test"); $

Ajax call doesn't work in click() in Javascript

gls I am trying to dynamically update my page using ajax and php. The call was working fine until the ajax call was put into the click() function. Alarm is OK $(document).ready(function(){ $("#formbutton").click(function(){ alert("test"); $

Ajax call doesn't work in click() in Javascript

gls I am trying to dynamically update my page using ajax and php. The call was working fine until the ajax call was put into the click() function. Alarm is OK $(document).ready(function(){ $("#formbutton").click(function(){ alert("test"); $

jQuery doesn't work with content returned by ajax

克里斯塔 普斯 · 盖杜里斯 (Kristaps Gaidulis) I've had this problem for a while now and I just can't understand what I'm doing wrong (I think it has something to do with the ajax response) I am trying to upload an image to the server. I've tried my luck with the uploadif

jQuery doesn't work with content returned by ajax

克里斯塔 普斯 · 盖杜里斯 (Kristaps Gaidulis) I've had this problem for a while now and I just can't understand what I'm doing wrong (I think it has something to do with the ajax response) I am trying to upload an image to the server. I've tried my luck with the uploadif

Triggers don't work for content loaded via Ajax

Walter White I have the following question. I was forced to rewrite all the following functions to create this function: $(document).on("change","#type_of",function(){ Instead of this: $('#type_of').on('change', function () { I'm doing this because I'm working

Triggers don't work for content loaded via Ajax

Walter White I have the following question. I was forced to rewrite all the following functions to create this function: $(document).on("change","#type_of",function(){ Instead of this: $('#type_of').on('change', function () { I'm doing this because I'm working

Triggers don't work for content loaded via Ajax

Walter White I have the following question. I was forced to rewrite all the following functions to create this function: $(document).on("change","#type_of",function(){ Instead of this: $('#type_of').on('change', function () { I'm doing this because I'm working