JQuery - идентификатор доступа IMG, добавленный в таблицу для php-скрипта

Question

В принципе, у меня есть таблица, показывающая несколько строк с кнопкой удаления рядом с ними. Когда кто-то нажимает кнопку удаления, я беру идентификатор этой кнопки, передаю ее скрипту php, удаляю запись из базы данных и затем выпадаю строку из страницы. Вот код:

$(".remove-button").live('click', function(){ 
    var remove_ptype = encodeURIComponent($(this).attr("id")); 

    $.ajax({ 
     type: "POST", 
     dataType : "html", 
     url: "script.php", 
     data: "id of remove button goes here", 
     success: function(msg){ 
     //Do nothing 
     } 
     }); 
    $(this).parent().parent().fadeOut(500); 
    }); 

OK, следующий шаг. Также есть кнопка добавления, которая открывает диалог, который затем обрабатывает скрипт, возвращает некоторые данные и добавляет добавляет еще одну строку для введенных данных. Этот скрипт также возвращает идентификатор для кнопки удаления, которая затем будет использоваться вышеуказанным кодом. Вот добавочный код:

$("<tr>" + 
     "<td>" + unescape(name) + "</td>" + 
     "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + name_id + "\" class=\"remove-button\" width=\"20\">"+ "</td>" + 
     "</tr>").appendTo("#ptypes tbody"); 

Так что это прекрасно работает до сих пор. Теперь, когда я пытаюсь удалить эту недавно добавленную строку без обновления страницы, она действительно удаляется с экрана, но я не могу получить идентификатор этой недавно добавленной кнопки .remove и передать ее в свой php-скрипт. Я знаю, что это возможно, поскольку я видел это раньше в других приложениях (например, basecamp). Итак, может ли кто-нибудь объяснить мне, как я могу это сделать?

FYI, я использую JQuerUI создать окно диалога и т.д.

Большое спасибо за вашу помощь!

---

ПРИСОЕДИНЕНИЕ К ОРИГИНАЛ СООБЩЕНИЕ

ИТАК идентификатор действительно не показывает вверх. У меня есть это, чтобы показать, и это работает, но у меня все еще есть проблема. Вот код для моего JQuery:

$("#add-type-form").dialog({ 
          autoOpen: false, 
          height: 350, 
          width: 500, 
          modal: true, 
          buttons: { 
           "Add": function() { 
            var type_name = encodeURIComponent($('#type_name').attr('value')); 
            var type_id = ''; 
            if (type_name != "") { 
             //Submit form 
             $.ajax({ 
             type: "POST", 
             dataType : "html", 
             url: "script.php", 
             data: "f=1" + "& ff=2" + "MORE STUFF", 
             success: function(msg){ 
             types_id = msg; 
             } 
             }); 
             type_id = types_id; 
             //Append to display           
             $("<tr>" + 
               "<td>" + unescape(type_name) + "</td>" + 
               "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">"+ "</td>" + 
              "</tr>").appendTo("#ptypes tbody"); 
             $(this).dialog("close"); 
            }}, 
           Cancel: function() { 
            $(this).dialog("close"); 
           } 
          }, 
          close: function() { 
           allFields.val("").removeClass("ui-state-error"); 
          } 
         }); 

Так что это JQUERYUI diagloue, который в основном обрабатывает скрипт возвращает идентификатор, который я хочу, чтобы присвоить мой IMG тег. Проблема в том, что кнопка добавления должна быть нажата дважды по какой-либо причине. Если удалить строку, в которой я присвоить значение для моего TYPE_ID после Название переменной функции AJAX, т.е .:

type_id = types_id; 

Я не могу получить идентификатор типа. Если линия остается там, нажмите кнопку добавления дважды. Я не знаю, почему это происходит. Я уверен, что это моя нехватка знаний JS, поэтому я ищу помощь, потому что я не вижу ничего плохого в декларации переменных как таковой.

Еще раз спасибо!

Answer 1

Этот вопрос кажется довольно связанной с тем, что вы делаете: jquery Find ID of dynamically generated tr tag

Код упоминается как выглядит, но я думаю, что вы можете переписать его под свои нужды:

$("a[href='delete.php']").click(function(e){ 
    var tr = $(this).closest('tr'), 
     id = tr[0].id; 

    // Put your AJAX call here 
    $.post('/delete/' + id, function(){ 
     // Animate up, then remove 
     tr.slideUp(500, function(){ 
      tr.remove(); 
     }); 
    }); 

}); 

Если вы запустите Chrome или Firefox, вы даже можете увидеть кнопку id кнопки в первую очередь? Возможно, это даже не добавлено ...

Удачи!

---

Похоже, вы не ожидаете ответа на ваш запрос, поэтому, вероятно, вам нужно дважды нажать кнопку.Я взломал вместе (надеемся, работающий) версию сценария, который ожидает запроса, чтобы закончить перед закрытием окна и делать все, что другой часовой механизм:

$("#add-type-form").dialog({ 
    autoOpen: false, 
    height: 350, 
    width: 500, 
    modal: true, 
    buttons: { 
     "Add": function() { 
      var type_name = encodeURIComponent($('#type_name').attr('value')); 
      var type_id = ''; 
      var this_old = $(this); // Because $(this) won't really work inside of a anonymous function, you have to back up the original $(this) to another variable. 

      if (type_name != "") { 
       //Submit form 
       $.ajax({ 
        type: "POST", 
        dataType: "html", 
        url: "script.php", 
        data: "f=1" + "& ff=2" + "MORE STUFF", 
        success: function(msg) { 
         types_id = msg; // I'm not exactly sure if you need these two lines, but I'll keep them here anyways. 
         type_id = types_id; 

         //Append to display           
         $("<tr>" + "<td>" + unescape(type_name) + "</td>" + "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">" + "</td>" + "</tr>").appendTo("#ptypes tbody"); 
         this_old.dialog("close"); 
        } 
       }); 
      } 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     allFields.val("").removeClass("ui-state-error"); 
    } 
}); 

Может быть, это будет работать?