JQuery - получение неправильного идентификатора из события нажатия

Question

Смотрите пример: https://jsfiddle.net/DTcHh/25321/

Вы можете увидеть 3 кнопки, каждая кнопка имеет data-entry-id атрибут.

<button data-toggle="modal" data-target="#edit" data-entry-id="5"> Button 1</button> 
    <button data-toggle="modal" data-target="#edit" data-entry-id="10"> Button 2</button> 
    <button data-toggle="modal" data-target="#edit" data-entry-id="15"> Button 3</button> 

При нажатии на кнопке, она будет проходить значение от data-entry-id загрузчика модальности в Save changes кнопке (data-id атрибута). Вот как это делается:

$('#edit').on('show.bs.modal', function(event) { 
     var thisModal = $(this); 
     var entryId = $(event.relatedTarget).data('entry-id'); 

     $('.btn-save', thisModal).attr('data-id', entryId); 
     $('.content-text', thisModal).html("Button Entry ID: " + entryId); 
    }); 

При нажатии на любую кнопку, а затем нажмите на кнопку «Сохранить изменения» из модального - это предупредит идентификатор из data-id атрибута. Проблема в том, что он не показывает правильный идентификатор, когда вы нажимаете «Сохранить изменения». Он не соответствует атрибуту data-id в кнопке «Сохранить изменения». Чем это вызвано?

$('body').on("click", ".btn-save", function (event) { 
    var id = $(this).data('id'); 
    alert(id); 
}); 

Answer 1

Не используйте data-* с .data() и jQuery.attr вместе, используйте один из них, как разные.

jQuery.data() не манипулирует attribute и наоборот

$(function() { 

    $('#edit').on('show.bs.modal', function(event) { 
    var thisModal = $(this); 
    var entryId = $(event.relatedTarget).data('entry-id'); 
    alert(entryId) 
    $('.btn-save', thisModal).attr('data-id', entryId); 
    $('.content-text', thisModal).html("Button Entry ID: " + entryId); 
    }); 
}); 

$('body').on("click", ".btn-save", function(event) { 
    var id = $(this).attr('data-id'); 
    alert(id); 
}); 

Updated Fiddle

Answer 2

$('body').on("click", ".btn-save", function (event) { 
    var id = $(this).attr('data-entry-id'); 
    alert(id); 
}); 

Атрибуты данных являются атрибутами. Таким образом, вы захватываете их так же, как и другие атрибуты.

Updated Fiddle

Answer 3

Хотя у меня нет четкой картины вашего кода из вашего вопроса, то я вижу, что вы используете:

$('body').on("click", ".btn-save", function (event) { 
    var id = $(this).data('id'); 
    alert(id); 
}); 

Я думаю, что когда этот обработчик событий запускает $ (это) относится к элементу тела. я могу предположить, что, поскольку вы пытаетесь сохранить данные на кнопку сохранения, вы хотите получить идентификатор из данных на кнопку Сохранить как так:

var id = $(e.target).data('id');