要素をスクリプトで追加した後にjqueryクラスを追加するには？

Question

私はハイパーリンクを持っている、それがクリックされます一度それが下のスクリプトを実行します特徴「アイテムを追加」：ここだ

<script type="text/javascript"> 
var selectedId = $("#combobox").val().toString(); 
var itemId = $("#itemId").val().toString(); 
var qty = $("#itemQty").val().toString(); 
//var item = 
    function addItem() { 
    $.ajax({ 

    url: "PO_Items.php", 

    data: "supplier="+$("#combobox").val().toString()+"&Item="+$("#itemId").val().toString()+"&Qty="+$("#itemQty").val().toString(), 
    cache: false, 
    success: function(html){ 
    $("#items").empty(); 
    $("#items").append(html); 
    $("#itemName").val(""); 
    $("#itemId").val(""); 
    $("#itemQty").val(""); 

    } 
}); 
     } 

が実行されますPHPのコードです：？

<?php 
include 'config.php'; 
session_start(); 
$SessionId = session_id(); 

$Id = $_GET["PurchaseItemID"]; 
$delete = "Delete from tbl_purchaseitem Where PurchaseItemID = '$Id'"; 
$result1 = mysql_query($delete); 



$GetItems = "Select * From tbl_purchaseitem Where SessionID = '$SessionId'"; 
$result2 = mysql_query($GetItems); 
echo "<table>"; 
echo "<th>SessionID</th>"; 
echo "<th>ItemsId</th>"; 
echo "<th>Qty</th>"; 
while($row = mysql_fetch_array($result2)) 
{ 
    $PurchaseItemId = $row['PurchaseItemID']; 
    $SessionId = $row['SessionID']; 
    $ItemsId = $row['ItemsId']; 
    $Qty = $row['Qty']; 

    echo "<tr> <td>" .$SessionId ."</td>" ."<td>" .$ItemsId ."</td>" ."<td>" .$Qty ."</td>" 
    ."<td>" ."<a href='#edititem' class='inline2' id='$PurchaseItemId' >Edit item</a>" 
    ."<td>" ." <a href='' id='$PurchaseItemId'>Delete item</a>" 

    ."</tr>"; 

    //<a href="#additem" class="inline" style="display:none" >Add item</a> 
} 

echo "</table>"; 

>

ここに私が今持っているもう一つのコードでは、動的に追加された「アイテムの編集」リンクがファンシーボックスを開きます：

<script type="text/javascript"> 



$(".inline2").live("click", function() { 

      $(this).fancybox({ 
       'titlePosition'  : 'inside', 
       'transitionIn'  : 'none', 
       'transitionOut'  : 'none' 
      }); 

}); 


</script> 

ファンシーボックスは2回目のクリックでのみ開くので、1回目のクリックでは#edititemがURLに追加されますが、何も起こりません。私の仮定/推測では、 .live（ "click"、function（）のため、live（）を使用する代わりにon（）を使用してください。

あなたの回答は大きな助けとなり、非常に感謝しています。これはあなただけ行わない理由edititemのためだけであれば、あなたが

Answer 1

++をありがとう：

$("#edititem").click(function() { 
      $(this).fancybox({ 
       'titlePosition'  : 'inside', 
       'transitionIn'  : 'none', 
       'transitionOut'  : 'none' 
      }); 
}); 

Answer 2

は、私は次の通りコードにe.preventDefault()を追加することをお勧めする可能性があります。

べき

$(".inline2").live("click", function (e) { 
     e.preventDefault(); 

     $(this).fancybox({ 
      "titlePosition"  : "inside", 
      "transitionIn"  : "none", 
      "transitionOut"  : "none" 
     }); 

}); 

#edititemへのナビゲーションを防止します。

live,bindおよびdelegateがその関数に結合されているため、jQuery 1.7+には.onを使用する必要があります。私はそれが行く方法を知ってみましょうと、私は新たな疑問への答えと私の答えを更新します

$(document).on("click", ".inline2", function (e) { 
     e.preventDefault(); 

     $(this).fancybox({ 
      "titlePosition"  : "inside", 
      "transitionIn"  : "none", 
      "transitionOut"  : "none" 
     }); 

}); 

：

あなたは、あなたのようなアプローチを試してみてください .onを使用しようとしている場合。

UPDATE：

$(document).on("click", ".inline2", function (e) { 
     e.preventDefault(); 

     $.fancybox.open($(this), { 
      "titlePosition"  : "inside", 
      "transitionIn"  : "none", 
      "transitionOut"  : "none" 
     }); 

}); 

：.open APIメソッドを使用して、私は前にそれを使用していないが、おそらく、あなたの代わりに次のことを試みることができるよう

私はfancyboxを使用して100％ではありませんよ

Answer 3

fancyboxスクリプトのAPIオプションのため、fancybox v1.3.xを使用していると仮定しています。その場合、そのバージョンは動的に追加された要素をサポートしません。

jQuery .on()メソッドを使用して、fancyboxをそれらの要素にバインドすることができます。私も同様の質問hereにコードとデモページで回答しました。