Databases
StackOverflow2013
Postsdbo
POApply jQuery to elements created by ajax
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POApply jQuery to elements created by ajax
    text
    copied!<p>I'm trying to figure out how to apply jQuery methods, functions etc for elements that have been created with ajax. In my page there is a dropdown list #cat_id and depending on the selection made, a set of UL elements are created. I then need to call the following function for each element created:</p> <pre><code>$('#allowSpacesTagsX').tagit({ itemName: 'itemX', fieldName: 'tagsX', availableTags: sampleTagsX, allowSpaces: true }); </code></pre> <p>where allowSpacesTagsX (X=1,2,3,....) is the id of the created UL elements. This method binds the UL to an auto-complete tagging widget similar to the tagging element used in StackOverflow.</p> <p>Normally the code above would be included in the document.ready for the static elements but I need to add it for each element created with ajax.</p> <p>This is a small sample of code to understand my question better:</p> <pre><code>&lt;script src="../js/tag-it.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { $('#cat_id').live('change', function(e){ $.post('../includes/ajax.php', { cat_id : $(this).find("option:selected").attr('value')}, function(data) { $("#tagholder").html(data); }); }); }); &lt;/script&gt; </code></pre> <h2>Edit:</h2> <p>example added to demonstrate an example of the code that should be produced:</p> <pre><code>$(function(){ // Creates the arrays of tags to be assigned to each tag field var sampleTags1 = ['USB', 'DVB', 'GSM', 'OEM']; var sampleTags2 = ['Alfa Romeo', 'Audi', 'Chevrolet', 'Mazda', 'Mercedes']; var sampleTags3 = ['20cm', '21cm', '8in']; $('#allowSpacesTags1').tagit({ itemName: 'item1', fieldName: 'tags1', availableTags: sampleTags1, allowSpaces: true }); $('#allowSpacesTags2').tagit({ itemName: 'item2', fieldName: 'tags2', availableTags: sampleTags2, allowSpaces: true }); $('#allowSpacesTags3').tagit({ itemName: 'item3', fieldName: 'tags3', availableTags: sampleTags3, allowSpaces: true }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload