jQuery onclick event in a each function

Question

I'm trying to append a transparent layer to some elements with an edit button within. The edit button has an onclick function. The value transfered with the onclick is an ID from the parent element (whom the transparent layer is appended upon)

My problem is, that all the edit buttons unfortunately carry the same value: cms-block-3.

What am I doing wrong?

I hope I explained myself properly. Thanks in advance!

Example of HTML:

<div class="editable cms-block-1">Some</div>
<div class="editable cms-block-2">Someting else!</div>
<div class="editable cms-block-3">Something else else! :)</div>

$(document).ready(function() {
    $('.editable').each(function(index) {

        $($(this).attr('class').split(' ')).each(function() { 
            if (this !== '' && this.substring(0, 3) == "cms") {
                element = this.toString();
            }
        });

        var $t = $(this);
        var offset = $t.offset();
        var dim = {
            left:    offset.left, 
            top:    offset.top, 
            width:    $t.outerWidth(), 
            height:    $t.outerHeight()
        };

        $('<div class="editable-focus"></div>').css({
            position:    'absolute', 
            left:        dim.left + 'px', 
            top:        dim.top + 'px',
            width:        dim.width + 'px',
            height:        dim.height + 'px'
        }).appendTo(document.body).append('<input type="button" value="Edit" class="edit-btn" onclick="edit_area(element)" />');
    });
});

Answer 1

With this code, your button HTML ends up being literally

<input type="button" value="Edit" class="edit-btn" onclick="edit_area(element)" />

Based on your description, it should rather be something like

<input type="button" value="Edit" class="edit-btn" onclick="edit_area('some_id')" />

But then again, your editable divs do not have an id so with the current HTML this would not work either.

Apart from this, your problem is that by writing element you are actually referencing window.element, which returns the last value assigned to it.

Here's a fix:

$('.editable').each(function(index) { 
    var element; // ADD THIS TO MAKE element A LOCAL VARIABLE

    // [...]

    var $button = $('<input type="button" value="Edit" class="edit-btn" />');
    $('<div class="editable-focus"></div>').css({
        position:    'absolute',
        left:        dim.left + 'px',
        top:        dim.top + 'px',
        width:        dim.width + 'px',
        height:        dim.height + 'px'
    }).appendTo(document.body).append($button);

    // And now you can write your event handler without fuss like this:
    $button.click(function() { alert(element); });

See it in action.