我试图弄清楚如何将 jQuery 方法、函数等应用于使用 ajax 创建的元素。在我的页面中有一个下拉列表#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 });
});