添加多个事件侦听器 ajax

Question

I am trying to iterate an ajax query, yet whenever I try to run the code i always defaults to 1 I'm not very familiar with js and wondered whether anyone had any idea how to do this, or whether there is a better way to do it altogether. Thanks in advance!

$.each(Array(10), function(i) {
            var clickedButton = $('#' + (++i));
            $(clickedButton).click(function (){
                $.ajax({
                    type: 'POST',
                    url: 'example.php',
                    data: {lightid: i},
                    success:function(result){}
                });
            });
          });

Answer 1

You can achieve the desired result by using a data attribute with the necessary data for each "button". This can be picked out via this.dataset.<attribute-name> and sent to the server:

 $('[data-id]').on('click',function(){ $.post('https://jsonplaceholder.typicode.com/posts',{lightid:this.dataset.id}) .done(r=>console.log(r)) })

 div[data-id] {cursor:pointer}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>Click on any div below:</div> <div data-id="1">one</div> <div data-id="2">two</div> <div data-id="3">three</div> <div data-id="4">four</div> <div data-id="5">five</div> <div data-id="6">six</div> <div data-id="7">seven</div> <div data-id="8">oneeight</div> <div data-id="9">nine</div> <div data-id="10">ten</div>

I used the attribute data-id to hold the numerical information, as the html attribute id should always have values starting with an alphabetical character.