Event.preventDefault(); doesnt work in a post

I have click function on a generated JSON html table with links. These links should show rest JSON objects below table without reload the page. But now if i click on a link it will try to open a page. In this example just open same page. This is installed as plugin. I tested the code in a clean environment out of wordpress headers and it work. How can i prevent click event here? Thank you!


define( 'HOURS', 60 * 60 );

function get_api_info( ) {

    global $apiInfo; // Check if it's in the runtime cache (saves database calls)
    if( empty($apiInfo) ) $apiInfo = get_transient('api_info'); // Check database (saves expensive HTTP requests)
    if( !empty($apiInfo) ) return $apiInfo;

    $response = wp_remote_get('https://jsonplaceholder.typicode.com/users');
    $data = wp_remote_retrieve_body($response);

    if( empty($data) ) return false;

    $apiInfo = json_decode($data); // Load data into runtime cache
    set_transient( 'api_info', $apiInfo, 12 * HOURS ); // Store in database for up to 12 hours

    return $apiInfo;
// Make the WP_Error object global    
    global $json_error;
    // instantiate the class
    $json_error = new WP_Error;

$response = file_get_contents('https://jsonplaceholder.typicode.com/users');

					$someArray = json_decode($response, true);
					   echo "<table>
							 foreach($someArray as $row):
							  echo "<tr>";
							  echo "<td>" . $row['id'] . "</td>";
							  echo "<td>" . $row['name'] . "</td>";
							  echo "<td ><a href=" . $row['id'] . " class='details'>" . $row['email'] . "</a></td>";
							  echo "</tr>";
							echo "</table>";

	var uservarid = $( this ).attr( 'href' );
                $.getJSON('https://jsonplaceholder.typicode.com/users/'+uservarid, function(emp) { 
                    $('#userdetails').html('<p> Name: ' + emp.name + '</p>'); 
                    $('#userdetails').append('<p>Phone : ' + emp.phone+ '</p>'); 
                    $('#userdetails').append('<p> Company: ' + emp.company.name+ '</p>'); 
                    $('#userdetails').append('<p> Website: ' + emp.website+ '</p>'); 


echo "<div id='userdetails'></div>";

Source link