Как добавить класс 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>"; 

>

Вот еще один код, который у меня есть сейчас, что делает динамически добавленную ссылку «Изменить элемент» открывать fancybox:

<script type="text/javascript"> 



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

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

}); 


</script> 

Что не так в этом случае, fancybox откроется только во втором клике, во время первого щелчка ничего не произойдет, за исключением того, что # urlitem будет добавлен на url. Мое предположение/предположение, что он открывается только после второго щелчка из-за .live («click», function(), я также прочитал, что вместо использования live() я должен использовать on(), потому что он уже устарел.

Сэр/Мэм Ваши ответы были бы очень полезными и были бы очень благодарны. Спасибо ++

Answer 1

Если это только для edititem, почему вы не просто сделать:

$("#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.

Вы должны использовать .on для JQuery 1.7+, как live, bind и delegate были объединены в эту функцию.

Если вы собираетесь использовать .on, то вы должны попробовать такой подход, как:

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

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

}); 

Позвольте мне знать, как она идет, и я буду обновлять свой ответ с любыми ответы на новые вопросы.

UPDATE:

Я не 100% с использованием FancyBox как я не использовал его раньше, но, возможно, вы можете попробовать следующее вместо этого, используя метод .Open API:

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

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

}); 

Answer 3

Я предполагаю, что вы используете fancybox v1.3.x, потому что параметры API в вашем скрипте fancybox. Если это так, эта версия не поддерживает динамически добавленные элементы.

Вы можете использовать метод jQuery .on() для привязки fancybox к этим элементам. Я ответил на аналогичный вопрос here с кодом и демонстрационной страницей.