如何通过脚本添加元素后添加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（），因为它已经被弃用了。

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

答

如果这仅仅是为了edititem为什么你不只是做：

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

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

});

您的解决方案都可以正常工作，但是第一次点击时它仍然不会显示在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。

如何通过脚本添加元素后添加jquery类？

相关推荐