jQuery событие onclick в каждой функции

Question

Я пытаюсь добавить прозрачный слой к некоторым элементам с кнопкой редактирования внутри. Кнопка редактирования имеет функцию нажатия. Значение, переданное с помощью onclick, является идентификатором родительского элемента (к которому добавлен прозрачный слой)

Моя проблема в том, что все кнопки редактирования, к сожалению, имеют одинаковое значение: 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 не имеют идентификатора, поэтому с текущим 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); });

См. это в действии .

Answer 2

Проблема здесь в том, что для каждого вашего ввода обработчик onlick равен «edit_area (element)» *

элемент является переменной, поэтому он будет иметь только одно значение (т. Е. Последнее значение, которое ему было дано)

То, что вы хотите здесь сделать, это передать значение элемента, а не ссылку на переменную.

$('<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 +'\')" />');

Этот исправленный код должен помочь.

Что касаетсяВаш комментарий выше моего предположения состоит в том, что ваша функция edit_area не ожидает строку в качестве входных данных, но ожидает элемент DOM или объект jQuery, возможно?

Есть несколько исправлений в зависимости от того, где вы хотите изменить свой код.Самый простой способ исправить это - извлечь элемент dom на основе класса css, который мы даем функции в качестве параметра.

Поэтому в начале вашей функции edit_area просто добавьте:

var myElement = $('.' + element);

Answer 3

Ну, во-первых, вы не объявляете element, поэтому это глобальная переменная.

Во-вторых:

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

Это просто строка, она не имеет представления о контекстевы создаете его, поэтому edit_area(element) будет вызываться в глобальном контексте.Это удобно не выдает ошибку, потому что вы забыли объявить element и это глобальная переменная, поэтому она использует это.

Заменить на:

.append($('<input>', {
    type: "button",
    val: "Edit",
    'class': "edit-btn",
    click: function () {
        edit_area(element);
    }
}));

И объявить element

$('.editable').each(function(index) {
    var element;
....

Answer 4

В вашем коде.

элемент является глобальным объектом. Затем вы создали свою кнопку с помощью onclick = "edit_area (element)".

Итак, всякий раз, когда вы нажимаете кнопку, браузер передает глобальный объект элемент в функцию. Но элемент получил последнее значение, которое вы ему присвоили в итерации.

Answer 5

Вы должны добавить содержимое переменной element вместо самой переменной к входу:

}).appendTo(document.body).append('<input type="button" value="Edit" class="edit-btn" onclick="edit_area(\''+element+'\')" />');

Потому что переменная элемента всегда будет значением последнего элемента в цикле. (Вы не должны определять ее как глобальную переменную, пропуская var перед ее объявлением, кстати)

Answer 6

Вам нужно вставить значение «элемента», а не саму переменную, которая изменяется. Вот почему вы каждый раз видите окончательное значение "cms-block-3".

Изменение:

onclick="edit_area(element)"

Кому:

onclick="edit_area(\"'+element+'\")"