0

ajaxで作成された要素にjQueryメソッド、関数などを適用する方法を理解しようとしています。私のページにはドロップダウン リスト #cat_id があり、選択内容に応じて UL 要素のセットが作成されます。次に、作成された要素ごとに次の関数を呼び出す必要があります。

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

allowSpacesTagsX (X=1,2,3,....) は、作成された UL 要素の ID です。このメソッドは、UL を、StackOverflow で使用されるタグ付け要素と同様のオートコンプリート タグ付けウィジェットにバインドします。

通常、上記のコードは静的要素の 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 });
});
4

1 に答える 1

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>
于 2013-01-09T18:29:23.223 に答える