CODEWITHSUNDEEP
ajaxjquery
bikey77
bikey77

Reputation: 6672

jQuery - How to call/bind jquery events for elements added by ajax?

I'm working on an implementation of the jQuery plugin Tag-it! with a product entry form for assigning attributes to products of different type (laptops, tv's, gadgets etc).

The concept is the following: When adding a new product, first, the user selects the product category from a dropdown for the product being added and a jQuery .change() event is triggered making an ajax call to get all the attributes that are related to that category. For example, if Im adding a TV i want my ajax call to populate 3 inputs for inches, panel type, hdmi whereas, if i'm adding a laptop I want those inputs to be cpu, ram, hdd, screen etc. Tag-it! works with a list of words (in my case, attributes) and an input field for choosing the set of words. In my case, for each type of attributes I want to populate a separate input field and assign/bind it to/apply tagit plugin (sorry, I dont know how else to explain it).

Javascript:

<script src="../js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script>
        $(function(){
            // Sample1: var sampleTags1 = ["red", "green", "blue"]; 
            // Sample2: var sampleTags2 = ["lcd", "plasma", "tft"]; 

            var sampleTags1 = [<?=createTags('name', 'tags', 1)?>]; 
            // createTags($name, $tags, $id) is a PHP function that returnss a list of tags for a given attribute
            // Question 1: how do I place this here after a new input is added to the DOM?
            $('#myTags').tagit();

            //Question 2: for each input added to the DOM I need also to add this block in the javascript:
            $('#allowSpacesTags1').tagit({itemName: 'item1', fieldName: 'tags1',
                availableTags: sampleTags1, allowSpaces: true
            }); 

            $('#removeConfirmationTags').tagit({
                availableTags: sampleTags,
                removeConfirmation: true
            });
        });

$(document).ready(function() {
    $('#cat_id').change(function(){
        $.post('../includes/ajax.php', {   
          cat_id : $(this).find("option:selected").attr('value')}, function(data) {
          $("#tagholder").html(data);
        });
    });
});

</script>

Ajax returns the following for each call:

<ul id="allowSpacesTags'.$row['ctid'].'"></ul> // $row['ctid'] is the ID for that attribute

which represents the input field for entering the tags/attributes.

Before there's any misunderstanding, I'm not asking how to do this in PHP. My question is about the way I can dynamically add a var like sampleTags1 and also call the tagit() for each new input that is added to the DOM by ajax. I'll try to give any required information if my question isn't clear enough. Please look at the questions in the code comments. Thanks!

Upvotes: 0

Views: 820

Answers (1)

Marcelo Biffara
Marcelo Biffara

Reputation: 831

http://api.jquery.com/live/

with .live( events, handler(eventObject) ) you don't need to attach or re-attach events when content is added dynamically

EDIT i've just notticed that live is deprecated, instead you should use

.on() http://api.jquery.com/on/

Upvotes: 1

Related Questions