Кнопки jQuery с тем же классом, получая значение от кнопки

Question

У меня есть PHP-скрипт, который генерирует кнопки для каждого расписания контента. Скрипт отображает 1 HTML-кнопку с тем же именем, классом и идентификатором, однако значения устанавливаются на основе переменной.

В jQuery я объявил кнопку в зависимости от ее класса, что-то вроде

$('.save').button();

Однако, когда я нажимаю кнопку, она всегда возвращает значение первой кнопки «1», даже если я нажимаю 3-ю кнопку или 20-ю кнопку.

JQuery

$('.save').unbind().click(function() {      
    $.post('create.php', {'val' : $('.save').val()}, function(data){    
       alert($('.save').val()); // Always alerts "1" regardless of button pressed.     
       });
});

PHP

$ctr = 1;
foreach($GLOBALS['conflict_schedule'] as $key => $value) {
    $html = '

    <div style="float:right;">
    <button class="save" name="save" value="' . $ctr . '" id="save">Save</button>
    </div>

    echo $html;
    $ctr++;
}

Answer 1

Вместо повторного выбора $('.save') -элемента просто используйте $(this), который относится к элементу, по которому щелкают:

$('.save').unbind().click(function() {
    var clicked = $(this);

    $.post('create.php', {'val' : clicked.val()}, function(data){
        alert(clicked.val());
    });
});

Answer 2

Мне кажется, правильный ответ - изменить ваш PHP для генерации уникальных идентификаторов, а не использовать один и тот же идентификатор на всех кнопках:

$ctr = 1;
foreach($GLOBALS['conflict_schedule'] as $key => $value) {
    $html = '

    <div style="float:right;">
    <button class="save" name="save" value="'.$ctr.'" id="save_'.$ctr.'">Save</button>
    </div>

    echo $html;
    $ctr++;
}

и при использовании JQ 1.7+:

$('.save').on('click' create); //to bind

$('.save').off('click' create); //to unbind

function create(e) {
    $.post('create.php', {'val' : e.target.value}, function(data){    
       alert(e.target.value);
    });
}