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

?>

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

<script type="text/javascript">



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

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

});


</script>

Что не так с этим, то fancybox будет открываться только при 2-м клике, во время 1-го клика ничего не произойдет, за исключением того, что #edititem будет добавлен в URL, я предполагаю, что он открывается только после 2-го клика из-за .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, как у меняне использовал его раньше, но, возможно, вы могли бы попробовать следующее, используя метод API .open:

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

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

 });

Answer 2

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

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

Answer 3

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

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