Question

我的jQuery遇到了问题。基本上我拿起表单提交并使用jQuery Post到我的api。现在，如果找到了项目，each用于创建一个包含所显示数据的表格，然后用户可以访问该表格。

$('#update-postcode').submit(function(){
        $('#location-set-content').html(''); 
        event.preventDefault();

        var form = $(this).serialize();

        // Request
        $.post('/api/postcode/check', 
            form, 
            function(data) {    
                // check response
                $.each(data,function(k,v) {
                    var status = $.trim(data.status);

                    if(parseInt(status) < 1){
                        // remove the status
                        delete data.status;
                        $('#location-set-content').html('<h1 class="text-center">Unable to Find Location :(</h1>');
                    } else if(parseInt(status) == 1) {
                        // remove the status
                        delete data.status;
                        var output = '<table class="table table-bordered"><thead><tr><th>Postcode</th><th>Area</th><th>State</th><th>Actions</th></tr></thead><tbody>';
                        $.each(data, function(k, v){
                            output += '<tr>'; 
                            output += '<td>'+ v.postcode +'</td>'; 
                            output += '<td>'+ v.area +'</td>'; 
                            output += '<td>'+ v.state +'</td>'; 
                            output += '<td class="text-center"><a id="set-location" href="#" lid="'+ v.id +'">Set</a></td>'; 
                            output += '</tr>'; 
                        });                        
                        output += '</tbody></table>';
                        $('#location-set-content').append(output);
                    }


                });


            });



        return false;
    });

创建表没有问题 - 现在您可以看到最后一个字段 - <a id="set-location" href="#" lid="'+ v.id +'">Set</a>

这应该可以通过以下方式访问：

$('a#set-location').on('click', function(){
            event.preventDefault();
            var lid = $(this).attr('lid');
            // Request
            $.post('/api/postcode/set',
            {
                lid: lid
            },
            function(data){
                if(data.status == 0) {
                    notification('location-set-content', data.response.message, 'danger', 0);
                } else if(data.status == 1){
                    notification('location-set-content', data.response.message, 'success', 0);
                    go_to('/user/settings#location', 700);
                }
                console.log(data);
            });

            return false;
        });

但是，除非它在初始请求的 each 范围内，否则无效。因此，基本上唯一可行的方法是$('#id').on('click')函数是否在原始submit内。

我将如何解决这个问题，因为当第一个请求返回的项目超过1个时，引发的问题是多个ajax请求。

Answer 1

听起来您在页面加载时绑定了click的{{1}}事件。此时，没有任何要匹配的匹配元素。你想要做的是将处理程序进一步添加到文档就绪的元素上。也许是这样的：

a#set-location

甚至......

$('#location-set-content').on('click', 'a#set-location', function(){

jQuery post和OnClick的问题

1 个答案: