JQUERY href disabling issue

Question

Hi, I'm currently working on a home-made full front-office 100% javascript CMS of ours, and I'm having quite a problem. Some of the editable areas the user can edit are contained in href link. These href's are NOT editable, yet, when the user clicks on these zones (while in edition mode) browser follows these links.

First, heres an example of html generated by the CMS :

<span id ="8a8b8d2e262bde2d01262c08317c000c" class="document">

    <a href="/actions/ecommerce/viderSelectionPalierEtVitrine">
            <img src="/images/logo.gif" id="8a8b8d2e262bde2d01262c08bf83000d" title="" alt="" class="image logo" />
    </a>        
</span>

Here, for example, the user can only change the ; So I tried to manage the surrounding href that way :

        var referenceZone = $(this).attr("id");
    $("#"+documentId+" a").each(function() {
        $(this).click(function() {
            return false; 
        });
    });

Where referenceZone is my surrounding <span id ="8a8b8d2e262bde2d01262c08317c000c" class="document">

Is this as tricky as it seems to me ?

<** EDIT **> Added a sandbox for testing purposes here : http://jsbin.com/aboke/2

<** EDIT 2 **> What I don't understand is that alert(event.type) doesn't even fire up !!

//click event disabling on any href of curently edited ${"span.document"}
    $("span#" + documentId + " a").click(function(event) {
              alert(event.type);
              event.preventDefault();
      suppressionZoneModifiable(documentId);
          recupererTexte(referenceZone, documentId);
    });         

Answer 1

$(this).click(function() {
    return false; 
});

^ doesn't work. Using $(...).click() adds that function to the list of functions it executes upon clicking. It does not remove the default behavior of following the link.

You can override the default link action by doing:

this.onclick = function() { return false; }

Answer 2

Yes, it is possible, but not via return statement. Use preventDefault();

var referenceZone = $(this).attr("id");
$("#"+documentId+" a").click(function(event) {
    event.preventDefault();
});

Also, there's no need to do a .each() unless you're doing anything else with the links. But use event.preventDefault().

See rest of the documentation.

Answer 3

Your sandbox code at http://jsbin.com/aboke/2 has many errors. Here's a few:

1. the function argument is a string, but passed as a number

You should put quotes around the argument here:

renduZonesModifiables(8a8b8d2e262bde2d01262c08317c000c);

2. the argument does not match the span id

8a8b8d2e262bde2d01262c08317c000c vs. 8a8b8d2e262bde2d01262c08bf83000d

3. You are using onclick instead of click in jQuery

$(this).onclick = function() { return false; }

should be

$(this).click(function(e) {
     e.preventDefault();
});

4. You have a js error

"missing ) after argument list" (line 81)