Переменная получает «неопределенный» в функции JQUERY

Question

Я новичок в веб-разработке, и я пытаюсь создать функцию, которая управляет всеми различными кнопками на моей странице (для вызова php-кода по почте). Он прекрасно работает без параметра switch / case (или if / else), но как только я пытаюсь динамически «загрузить» параметры для действия Post, он больше не работает должным образом. Это на самом деле работает, когда я нажимаю кнопку во второй раз, что выглядит очень странно для меня :-). Проблема в том, что button_id внезапно отображается как "неопределенный". Не могли бы вы дать мне небольшой совет, пожалуйста?

$(document).ready(function() {

$(".btn").click(function()
{
    button_id = $(this).attr("id");
    switch ($(this).attr("id"))
    {
        case "ZXY" :
           php_func_name =  "ABC"
           php_id = "DEF"
           break;

        case "XYZ" :
           php_func_name = "HIJ"
           php_id = "KLM"
           break;
    }

    $('#' + button_id).click(function() {
        $.post("php_functions.php", {
            method: php_func_name,
            id: php_id
        }, function(data) {
      $("#test").html(data);
      alert (data);
        });
    });

}); 
});

Answer 1

Проблема в том, что вы меняете функцию для button.click. Поскольку вы не знаете свой HTML-код, я бы сохранял данные php_func_name и php_id в атрибутах data- в кнопке:

<button id="ZXY" class="btn" data-funcname="ABC" data-id="DEF"></button>
<button id="XYZ" class="btn" data-funcname="HIJ" data-id="KLM"></button>

$(document).ready(function() {
    $('.btn').click(function() {
        $.post("php_functions.php", {
            method: $(this).data('funcname'),
            id: $(this).data('id')
        }, function(data) {
            $("#test").html(data);
            alert (data);
        });
    });
}