Не удается получить e.preventDefault() для работы

Question

Я бы очень признателен, если кто-то может посмотреть мой код и посмотреть, почему preventDefault не работает.

Ссылки, по-видимому, нажимают на ошибку 404 страницы независимо от того, что я пытаюсь.

$(function() { 

$.ajax({ 
    url: "http://linktoapi&callback=myMethod", 
    timeout: 2000, 
    jsonpCallback: "myMethod", 
    jsonp: false, 
    dataType: "jsonp", 
    success: function(data) { 
     var newContent = ''; 
     for (var i = 0; i < data.listing.length; i++) { 
      newContent += '<p class="property-details">' + '<a href="' + data.listing[i].listing_id + '">' + data.listing[i].displayable_address + '</a></p>'; 

     } 
     $('#content').html(newContent).hide().fadeIn(400); 
    }, 
    error: function() { 
     $content.html('<div class="container">Please try again soon.</div>'); 
    } 
}); 




$('.property-details a').on('click', function(e) { 
    e.preventDefault(); 
$('#content').html("test").hide().fadeIn(400); 
}); 

}); 

Answer 1

Собственная делегирование событий требует, чтобы корневой элемент существовал во время привязки. Событие click затем может быть привязано ко всем потомкам корневого элемента, добавляются ли они позже или нет. Проверьте документацию: https://learn.jquery.com/events/event-delegation/

Попробуйте это:

$('body').on('click', '.property-details a', function(e) { 
    e.preventDefault(); 
    $('#content').html("test").hide().fadeIn(400); 
}); 

Answer 2

Заменить код JQuery с кодом ниже, как вы создаете якорь тег с помощью AJAX и для кода те не существует так просто загрузите anchor click event внутри success function of your ajax call и он будет работать:

$(function() { 

    $.ajax({ 
     url: "http://linktoapi&callback=myMethod", 
     timeout: 2000, 
     jsonpCallback: "myMethod", 
     jsonp: false, 
     dataType: "jsonp", 
     success: function(data) { 
      var newContent = ''; 
      for (var i = 0; i < data.listing.length; i++) { 
       newContent += '<p class="property-details">' + '<a href="' + data.listing[i].listing_id + '">' + data.listing[i].displayable_address + '</a></p>'; 

      } 
      $('#content').html(newContent).hide().fadeIn(400); 
    $('.property-details a').on('click', function(e) { 
     e.preventDefault(); 
    $('#content').html("test").hide().fadeIn(400); 
    }); 
     }, 
     error: function() { 
      $content.html('<div class="container">Please try again soon.</div>'); 
     } 
    }); 

    });