将jQuery应用于由ajax创建的元素

时间:2013-01-09 18:09:18

标签: ajax jquery

我正在试图弄清楚如何为使用ajax创建的元素应用jQuery方法,函数等。 在我的页面中有一个下拉列表#cat_id,根据所做的选择,创建一组UL元素。然后我需要为每个创建的元素调用以下函数:

$('#allowSpacesTagsX').tagit({ itemName: 'itemX', fieldName: 'tagsX', availableTags: sampleTagsX, allowSpaces: true });

其中allowSpacesTagsX(X = 1,2,3,....)是创建的UL元素的id。此方法将UL绑定到自动完成标记小部件,类似于StackOverflow中使用的标记元素。

通常,上面的代码将包含在static.lement的document.ready中,但是我需要为使用ajax创建的每个元素添加它。

这是一个很小的代码示例,可以更好地理解我的问题:

<script src="../js/tag-it.js" type="text/javascript"></script>
<script>
    $(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);
           });
        }); 
    });
</script>

编辑:

示例已添加,以演示应生成的代码示例:

$(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 });
});

1 个答案:

答案 0 :(得分:1)

<script src="../js/tag-it.js" type="text/javascript"></script>
<script>
$(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);//places your ajax content
        //grab that element again and then apply any jquery function to it
        //example add a class to an arbitary h1 tag inside #tagholder
        $("#tagholder h1").css('class','heading');//like so
       });
    }); 
});
</script>