JQuery - PHPスクリプトのテーブルに追加されたIMGのアクセスID

Question

基本的には、テーブルの横に削除ボタンが付いた数行が表示されています。誰かが削除ボタンをクリックすると、そのボタンのIDを取得し、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、次の手順です。また、ダイアログを開き、スクリプトを処理し、いくつかのデータを返し、追加したデータのために別の行を追加する追加ボタンがあります。このスクリプトはまた、上記のコードで使用されるdeleteボタンのidを返します。追加するコードは次のとおりです。

$("<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-buttonのIDを取得してPHPスクリプトに渡すことができません。他のアプリケーション（basecampのような）でこれまでに行ったことを見てきたように、それが可能であることは分かっています。だから、誰も私がこれを達成する方法について私を導くことができますか？

FYI、私はなど、ダイアログボックスを作成するためにあなたの助けのために多く

感謝をJQuerUIを使用しています！

---

元のメッセージTO ADDITION

OK IDが実際に現れていませんでしたので。私はそれを表示してそれを動作させるが、私はまだ問題があります。ここに私の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タグに割り当てるIDを返します。問題は、何らかの理由で追加ボタンを2回押す必要があることです。私はAjaxの機能の後に私のTYPE_IDのvaraibleに値を割り当てるライン、すなわち：

type_id = types_id; 

を削除した場合、私はタイプIDを取得することはできません。行がそこに残っている場合は、追加ボタンを2回クリックする必要があります。なぜそれが起こっているのか分かりません。私は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が表示されますか？それは追加されていないこともあります...

幸運！

---

あなたはクエリに応答するのを待っていないようです。おそらくボタンを2回クリックする必要があります。多分これがうまくいく

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

：私は一緒にクエリは、ダイアログを閉じて、他の時計仕掛けのすべてを実行する前に終了するのを待って、あなたのスクリプトの（うまくいけば作業）バージョンをハッキングしてきましたか？