Javascript не распознает созданную кнопку

Question

У меня есть Javascript, который создает кнопку при успешном представлении формы ajax. Когда страница перезагружается, кнопка будет отображаться на странице.

Его простая комбинация javascript формы для добавления элемента в таблицу с кнопкой удаления для удаления этого элемента.

Я запустил инструмент diff, и нет никаких различий между отправкой формы и созданием кнопки и перезагрузкой страницы с уже созданной кнопкой. Таким образом, это заставляет меня думать, что 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> 

EDIT:

Почему это не

$('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

, если я получил вашу точку

1-й:, если вы используете отправить форму или тип кнопки отправить щелчок без перезагрузки страницы вы можете использовать e.preventDefault()

второй: с динамически создаваемых элементов, которые вы должны использовать

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

взглянуть на Event binding on dynamically created elements?