Question

我正在学习jquery。我写了一个脚本，但它无法正常工作

1我的HTML

<ul id="recur" class="elasticstack">
    <li id=<?=$item['id']?>>.......</li>
    ....................................
</ul>

2我的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);
            }
        });
    });
}

我的错误在哪里？谢谢大家！

Answer 1

我认为你有更多的id＆＃34; recur＆＃34;在相同的HTML中。检查您的jquery库版本是否有实时功能。你可以使用1.8版本的库

Answer 2

首先，您省略了要为每个<li>元素处理的事件。我们假设现在点击 ...

如果你正在使用jQuery＆gt; 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);
    });
});

Answer 3

您错过了ID中的引号。试试这个：

<ul id="recur" class="elasticstack">
    <li id="<?=$item['id']?>">.......</li>
</ul>

你不能得到身份证，因为那里没有。

执行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（）方法可以获得更好的性能。

如果你是dinamicaly添加项目并想在每次添加项目时显示数据，你可以使用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);
                }
            });
    });
}

Answer 4

HTML中的

<ul id="recur" class="elasticstack">
    <li id="<?=$item['id']?>" >.......</li>
    ....................................
</ul>

在Ajax函数中

data:[{name:'propertyId', value:id}]

jquery函数对我不起作用

4 个答案: