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

＆GT;

这里我现在使用另一个代码，使动态添加的“编辑项目”链接打开一个fancybox：

<script type="text/javascript">



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

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

});


</script>

这有什么问题是fancybox只会在第二次点击时打开，在第一次点击期间不会发生任何事情，只会在网址上添加#edititem，我的假设/猜测是它只在第二次点击后打开因为.live（“click”，function（），我也读过而不是使用live（）我应该使用on（）因为它已经被弃用了。

先生/女士，您的回答将会非常有帮助，非常感谢。谢谢++

Answer 1

我建议您根据以下内容将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"
        });

 });

Answer 2

如果这仅适用于编辑项目，为什么不这样做：

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

Answer 3

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

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

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

3 个答案: