每个函数中的 jQuery onclick 事件

Question

我正在尝试将透明层附加到某些元素，其中包含编辑按钮。编辑按钮有一个 onclick 函数。通过 onclick 传输的值是来自父元素(透明层附加在其上)的 ID

我的问题是，不幸的是所有编辑按钮都带有相同的值:cms-block-3。

我做错了什么？

我希望我能正确地解释自己。提前致谢!

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

使用此代码，您的按钮 HTML 最终将成为字面上

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

根据你的描述，它应该是这样的

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

但话又说回来，您的可编辑 div 没有 id，因此对于当前的 HTML，这也不起作用。

除此之外，您的问题是，通过编写 element，您实际上引用了 window.element，它返回分配给它的最后一个值。

修复方法如下:

$('.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 。