如何在通过脚本添加元素后添加jquery类 - How to add jquery class after the element is added through a script?

我有一个超链接"添加项目"，点击后将执行以下脚本：

<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（"点击"，function（），我也读到过，我应该使用on（），而不是使用live（），因为它已经被弃用了。

先生/女士，您的回答将大有帮助，我们将不胜感激。谢谢++

我可以建议根据以下内容将e.preventDefault()添加到代码中吗：

$(".inline2").live("click", function (e) {
        e.preventDefault();
        $(this).fancybox({
            "titlePosition"     : "inside",
            "transitionIn"      : "none",
            "transitionOut"     : "none"
        });
 });

这应该会阻止导航到#edititem。

您应该将.on用于jQuery 1.7+，因为live、bind和delegate已组合到该函数中。

如果你打算使用.on，那么你应该尝试一种方法，比如：

$(document).on("click", ".inline2", function (e) {
        e.preventDefault();
        $(this).fancybox({
            "titlePosition"     : "inside",
            "transitionIn"      : "none",
            "transitionOut"     : "none"
        });
 });

让我知道进展如何，我会用新问题的任何答案更新我的答案。

更新：

我不是100%使用fancybox，因为我以前没有使用过它，但也许你可以尝试以下方法，使用.open API方法：

$(document).on("click", ".inline2", function (e) {
        e.preventDefault();
        $.fancybox.open($(this), {
            "titlePosition"     : "inside",
            "transitionIn"      : "none",
            "transitionOut"     : "none"
        });
 });

如果这只是针对编辑项，为什么不直接执行：

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

我假设您使用的是fancybox v1.3.x，因为您的fancybox脚本中有API选项。如果是这样，则该版本不支持动态添加的元素。

您可以使用jQuery .on()方法将fancybox绑定到这些元素。我在这里用代码和演示页面回答了一个类似的问题。