Javascript not recognizing a created button

Question

I have some Javascript that creates a button when an ajax form submission is successful. When the page is reloaded the button will be rendered to the page.

Its a simple form javascript combination to add an item to a table with a remove button to remove that item.

I've run a diff tool and there aren't any differences between submitting the form and creating the button, and reloading the page with the button already created. So that leads me to believe Javascript isn't recognizing the button being created.

Here is some code:

Here is my javascript method

$('button#proxy_remove_given').click(function() {
        $.ajax({
            url: $('button#proxy_remove_given').attr('action'),
            type: 'POST',
            data: $('form#proxy_submit_form').serialize(),
            success: function(responce) {
                if ("Success" == responce) {
                    var username = $('button#proxy_remove_given').attr('name');
                    $('#given_proxy_access_table tr#'+username).remove();
                    var table_length = document.getElementById("given_proxy_access_table").rows.length;
                    if (table_length == 0) {
                        var table = document.getElementById("given_proxy_access_table");
                        var new_row = table.insertRow(0);
                        new_row.id = "NoProxyRow";
                        var cell1 = new_row.insertCell(0);
                        var cell2 = new_row.insertCell(1);
                        cell1.innerHTML = "<p>No Proxies Found</p>";
                        cell2.innerHTML = "<button data-toggle=\"collapse\" data-target=\"#add\">Add</button>";
                    }
                }
            }
        });
    });

Here is the javascript to add the button

$('button#proxy_submit').click(function() {
        $.ajax({
            url:'proxy/submit',
            type: 'POST',
            data: $('form#proxy_submit_form').serialize(),
            success: function(responce) {
                if ("Success" == responce) {
                    var table = document.getElementById("given_proxy_access_table");
                    if (table.rows.length == 1) {
                        if (table.rows[0].id == "NoProxyRow") {
                            document.getElementById("given_proxy_access_table").deleteRow(0);
                        }
                    }
                    var username = document.getElementById('id_proxy_username').value
                    var new_row = table.insertRow();
                    new_row.id = username;
                    var cell1 = new_row.insertCell(0);
                    var cell2 = new_row.insertCell(1);
                    cell1.innerHTML = "<p>{0}</p>".replace(/\{0\}/g,username);
                    cell2.innerHTML = "<button type=\"submit\" name=\"{0}\" id=\"proxy_remove_given\" action=\"proxy/remove/given/{0}\">Remove</button>".replace(/\{0\}/g,username);
                    document.getElementById("proxy_submit_form").reset();
                }
            }
        });
    });

Any idea why javascript wouldn't recognize a button being created?

<button type="submit" name="MikeC" id="proxy_remove_given" action="proxy/remove/given/MikeC">Remove</button>

EDIT:

Why isn't this

$('button#proxy_remove_given').click(function()

picking up this

<button type="submit" name="MikeC" id="proxy_remove_given" action="proxy/remove/given/MikeC">Remove</button>

when I add the button to the page

but it picks up the button call when I reload the page

It doesn't pick up the button because it's not there on pageload. The event handler is initialized on pageload, and only works on elements that are present at the time the event handler is initialized, not on elements added later. What you need is [**event delegation**](https://learn.jquery.com/events/event-delegation/) — adeneo, Dec 06 '15 at 23:58

score 0 · Answer 1 · answered Dec 06 '15 at 23:58

It sort of depends how your code is structured but I’m guessing your click listener wont find the button because it doesnt exist yet.

$('button#proxy_remove_given') looks for the button but it isn’t there yet. You should put your click listener after the button has been added.

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

if I got your point

1st: if you use submit form or button type submit click without reloading the page you can use e.preventDefault()

2nd: with dynamically generated elements you should use

$('body').on('click', 'selector' , function(){});

take a look at Event binding on dynamically created elements?

edited May 23 '17 at 12:30

Community

1
1

answered Dec 07 '15 at 00:09

Mohamed-Yousef

22,772
3
17
27

Javascript not recognizing a created button

2 Answers2