javascript - add event listener with jquery to generated dynamycally href

Question

I have many href generated dynamically with php, and i need event listener click.

it′s no very much problem, but when i′m traying to do click in one, always returned me, same data.

i have this:

$(".qrCode").click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();

      $.ajax({
        url: "{{ route('restaurants.qrcodes', $id) }}",
        type: "GET",
        success:function(response){
          console.log(response);
        },
        error: function(jqXHR, textStatus, errorThrown){
          if (jqXHR.status === 0) {

            alert('Not connect: Verify Network.');

          } else if (jqXHR.status == 404) {

            alert('Requested page not found [404]');

          } else if (jqXHR.status == 500) {

            alert('Internal Server Error [500].');

          } else if (textStatus === 'parsererror') {

            alert('Requested JSON parse failed.');

          } else if (textStatus === 'timeout') {

            alert('Time out error.');

          } else if (textStatus === 'abort') {

            alert('Ajax request aborted.');

          } else {

            alert('Uncaught Error: ' + jqXHR.responseText);

          }
        }
      });
  });

my html is:

<a data-toggle="tooltip" data-placement="bottom" title="{{trans('lang.restaurant_qrcodes')}}" href="{{ route('restaurants.qrcodes', $id) }}" target="_blank" class='btn btn-link qrCode'>
      <i class="fa fa-qrcode"></i>
    </a>

update

but i need if i want to do click in href witch id 12 go to id 12, now always go to id 11. I think that i can to do a each but i don′t know how i can do it.

I need this, for to do, a loader gif while web do operations

Thanks for help

question from:https://stackoverflow.com/questions/65938431/add-event-listener-with-jquery-to-generated-dynamycally-href

Answer 1

With method unbind() i get that i can only can select one href that i would like it

Solution:

$(".qrCode").unbind().click(function(event) {
    event.preventDefault();
    console.log($(this).attr('href'));
  });