How to add jquery class after the element is added through a script?

Question

I have a hyperlink 'Add item' wherein once it's clicked it will execute the script below:

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

  }
});
      }

Here's is the php code that gets executed:

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

?>

Here another code that I have right now that makes the dynamically added 'Edit item' link open a fancybox:

<script type="text/javascript">



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

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

});


</script>

What's wrong with this is the fancybox will only open on the 2nd click, during the 1st click nothing will happen except that #edititem will be added on the url, My assumption/guess is that it only opens after the 2nd click is because of the .live("click", function(), I've also read that instead of using live() I should use on() because it's already deprecated.

Sir/Ma'am your answers would be of great help and be very much appreciated. Thank you++

Ash Clarke · Answer 1 · 2012-02-23T11:14:13.180

2

May I suggest adding e.preventDefault() to the code as per the following:

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

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

 });

That should prevent navigation to #edititem.

You should use .on for jQuery 1.7+ as live, bind and delegate have been combined into that function.

If you are going to use .on then you should try an approach like:

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

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

 });

Let me know how it goes and I'll update my answer with any answers to new questions.

UPDATE:

I'm not 100% with the use of fancybox as I have not used it before, but perhaps you could try the following instead, using the .open API method:

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

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

 });

edited Feb 23 '12 at 11:14

answered Feb 23 '12 at 09:48

Ash Clarke

4,807
1
37
48

Both your solution is working but what happens is during the 1st click it will still not show inside a fancybox trying it again on the 2nd click it works. It's a bit weird. – Randel Ramirez Feb 23 '12 at 09:58
I'm very new to jquery but I think it's because the fancybox function is only added after link is clicked and not after the link is dynamically added or injected in the page that's why it works on the 2nd time I click it . – Randel Ramirez Feb 23 '12 at 10:06
$(document).on("click", ".EditLink", function (e) { e.preventDefault(); $this = $(this); $.fancybox({ href: $this.attr('href'), type: 'inline', 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'none' }); return false; }); – Randel Ramirez Feb 23 '12 at 11:43
Did that code (in your comment) work or is it still not showing on first click? – Ash Clarke Feb 24 '12 at 09:08

score 0 · Answer 2 · answered Feb 23 '12 at 09:04

0

If this is only for the edititem why don't you just do:

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

answered Feb 23 '12 at 09:04

Avanche

1,630
2
13
15

#edititem is the div element that should be shown, a hyperlink() 'Edit item' will be the one to trigger #edititem to be shown. #edititem is an inline element hidden that will be shown by the fancybox. – Randel Ramirez Feb 23 '12 at 09:36
The hyperlink 'Edit item' is injected in the page dynamically, but the div element #edititem is already present in the page as it is only an inline element for the fancybox it is hidden by display:none and will only pop up after clicking the 'Edit item' link – Randel Ramirez Feb 23 '12 at 09:42

score 0 · Answer 3 · edited May 23 '17 at 09:59

0

I am assuming you are using fancybox v1.3.x because the API options in your fancybox script. If so, that version doesn't support dynamically added elements.

You may use the jQuery .on() method to bind fancybox to those elements. I answered a similar question here with code and demo page.

edited May 23 '17 at 09:59

Community

1
1

answered Feb 23 '12 at 21:30

JFK

40,963
31
133
306

How to add jquery class after the element is added through a script?

3 Answers3