在超链接中使用ajax

I've created a bookmark page that retrieves links from a database and displays it. I'm able to log in, add new links & delete them. However, when I delete an entry it displays delete.php instead of loading the page onto itself (the query does work).

I've most likely over-complicated my code at this point and am probably overlooking something simple, as I've used a lot of JavaScript for other elements of the page.

The entries are added dynamically so this part of the HTML is being appended:

<h2>
    <a href="delete.php?URL='+url+'">[x]</a>
</h2>
<a href="'+url+'" target="iFrame" class="linkURL">
    <div class="bookmark">
        <h3 style="float: left;">'+title+'</h3>
        <br />
        <p>'+desc+'</p>
    </div>
</a>

JavaScript:

//  DELETE FUNCTION
$("h2 a").click(function() {
    return false;
    var action = $(this).attr('href');
    var form_data = {
        URL: $("#linkURL").attr('href'),
        is_ajax: 1
    }; // form_data
    $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        success: function(response){
            if(response == 'success') {
                alert('Successful delete!');
            } else { // if
                alert('Delete failed.');
            } // else
        } // function(response)
    }); // ajax
    return false;
}); // h2

The page is located here: http://samaradionne.com/links6/ if it is easier to view the whole thing.

You are using both an anchor tag a and a click event. You are getting the actual delete.php page because when you click on the anchor tag it works just like any regular link. You have no where in your code something that says "hey, don't actually follow this link like normal".

To not follow the link, you need

<a href="yoururl" onclick="return false;">[x]</a>

Furthermore, you attached your jQuery click event to the h2, which is not bad in of itself, just confusing as the intent is to actually click the link. In that case, you need:

$("h2 a").click(function(){});

Lastly, to bring this all together, you could do the following:

 $("h2 a").click(function(){
     // your normal logic

     return false; // don't follow link
 });

And then you don't have to have the onclick inside the anchor tag.

Since my links were dynamically generated, my .h2 a click was attaching itself to something that wasn't there yet. I added an event trigger to my append function that calls to my delete function.

Problem solved.