如何通過腳本添加元素後添加jquery類？

我有一個超鏈接「添加項目」，其中，一旦它的點擊它會執行下面的腳本：如何通過腳本添加元素後添加jquery類？

<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>";

這裏的另一個代碼，我現在使動態添加的「編輯項目」鏈接打開一個fancybox：

<script type="text/javascript"> 



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

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

}); 


</script>

這是什麼問題是fancybox只會在第二次點擊時打開，在第一次點擊之前什麼都不會發生，除了#edititem將被添加到url上，我的假設/猜測是它只會在第二次點擊之後打開由於.live（「click」，function（），我也讀過，而不是使用live（）我應該使用on（），因爲它已經被棄用了。

先生/女士您的答案將是非常有益的，非常感謝。謝謝++

來源

2012-02-23 Randel Ramirez

如果這僅僅是爲了edititem爲什麼你不只是做：

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

來源

2012-02-23 09:04:03 Avanche

#edititem是應顯示的div元素，超鏈接（）'編輯項目'將是觸發#edititem顯示的元素。 #edititem是隱藏的內聯元素，將被fancybox顯示。 – 2012-02-23 09:36:12

超鏈接'編輯項目'動態地注入到頁面中，但div元素#edititem已經存在於頁面中，因爲它只是它被顯示器隱藏的fancybox的內聯元素：無，只會在點擊後彈出'編輯項目'鏈接 – 2012-02-23 09:42:49

我可以建議增加e.preventDefault()的代碼按如下：

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

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

});

應阻止導航到#edititem。

對於jQuery 1.7+，您應該使用.on，因爲live,bind和delegate已合併到該函數中。

如果你要使用.on那麼你應該嘗試像一個辦法：

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

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

});

讓我知道如何去，我會更新我的任何答案，新的問題的答案。

UPDATE：

我不是100％的使用的fancybox的，因爲我以前沒有使用過它，但也許你可以嘗試，而不是下面，使用。開API方法：

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

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

});

來源

2012-02-23 09:48:01

您的解決方案都可以正常工作，但是第一次點擊時它仍然不會顯示在fancybox中，然後在第二次點擊它時再次嘗試。這有點奇怪。 – 2012-02-23 09:58:44

#edititem也不再出現在網址上，這很好。 – 2012-02-23 10:00:34

我對jquery很新，但我認爲這是因爲fancybox函數只在鏈接被點擊後添加，而不是在鏈接被動態添加或注入頁面後添加，這是爲什麼它在第二次單擊它時運行的原因。 – 2012-02-23 10:06:36

我假設你正在使用fancybox v1.3.x，因爲你的fancybox腳本中的API選項。如果是這樣，那個版本不支持動態添加的元素。

您可以使用jQuery .on()方法將fancybox綁定到這些元素。我用代碼和演示頁面回答了一個類似的問題here。

來源

2012-02-23 21:30:23 JFK

如何通過腳本添加元素後添加jquery類？

回答

相關問題