Question

我有一些Javascript在ajax表单提交成功时创建一个按钮。重新加载页面时，按钮将呈现给页面。

它是一个简单的表单javascript组合，用于将项添加到表中，并带有删除按钮以删除该项。

我运行了差异工具，提交表单和创建按钮，以及使用已创建的按钮重新加载页面之间没有任何区别。所以这让我相信Javascript并没有认识到正在创建的按钮。

以下是一些代码：

这是我的javascript方法

$('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>";
                    }
                }
            }
        });
    });

这是添加按钮的javascript

$('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();
                }
            }
        });
    });

知道为什么javascript无法识别正在创建的按钮？

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

编辑：

为什么不是这个

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

拿起这个

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

当我将按钮添加到页面

时

但是当我重新加载页面时它会接听按钮调用

Answer 1

这取决于你的代码的结构，但我猜你的点击监听器不会找到按钮，因为它还不存在。

$('button#proxy_remove_given')查找按钮，但它还没有。你应该在添加按钮后放置你的点击监听器。

Answer 2

如果我明白你的意思

1st：如果您使用提交表单或按钮类型提交点击而不重新加载您可以使用的页面e.preventDefault()

使用动态生成的元素

第二名

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

看看Event binding on dynamically created elements?

Javascript无法识别创建的按钮

2 个答案: