我正在学习jquery我写了一个脚本,但它不工作
1 My HTML
<ul id="recur" class="elasticstack">
<li id=<?=$item['id']?>>.......</li>
....................................
</ul>
我的jquery函数
function viewDetails()
{
$('#recur>li').live(function(){
var id = $(this).attr('id');
$.ajax({
url:'myUrl'
,type:'post'
,dataType:'json'
,data:{propertyId:id}
,success:function(data){
console.log(data);
}
});
});
}
我的错误在哪里?感谢所有!
我认为你有更多的id " recurrent "在相同的html。检查您的jquery库版本的实时功能。您可以使用1.8版本的库
首先,您省略了希望为每个<li>
元素处理的事件。让我们假设现在点击…
如果你正在使用jQuery> 1.9,你不能使用.live()
。相反,使用.on()
和事件委托
$('#recur').on('click', 'li', function(e) {
var id = this.id;
$.ajax({
url: 'myUrl',
type: 'POST',
dataType: 'json',
data: {propertyId: id}
}).done(function(data) {
console.log(data);
});
});
您缺少id中的引号。试试这个:
<ul id="recur" class="elasticstack">
<li id="<?=$item['id']?>">.......</li>
</ul>
你不能得到id,因为它不存在。
jQuery部分的一个更好的方法是:function viewDetails(){
$('#recur').find('li).each(function(){
$(this).on('click', function(){
var id = $(this).attr('id');
$.ajax({
url:'myUrl'
,type:'post'
,dataType:'json'
,data:{propertyId:id}
,success:function(data){
console.log(data);
}
});
});
});
}
不要使用.live()
方法。已弃用。使用.find()方法可以获得更好的性能。
如果你是动态添加项目,并希望每次添加项目时都显示数据,你可以使用livequery.js插件,并这样做:
function viewDetails(){
$('#recur li').livequery(function(){
var id = $(this).attr('id');
$.ajax({
url:'myUrl'
,type:'post'
,dataType:'json'
,data:{propertyId:id}
,success:function(data){
console.log(data);
}
});
});
}
in HTML
<ul id="recur" class="elasticstack">
<li id="<?=$item['id']?>" >.......</li>
....................................
</ul>
在Ajax函数
data:[{name:'propertyId', value:id}]