在jQuery中调用函数ajax成功响应只能工作一次但不能两次

Question

I have a page where I enter the names of cards and the card's details are presented via AJAX. I've removed a lot of code in this example that isn't relevant to the issue and I've tested this simplified code and it reproduces the same error.

The mysterious thing is that it works fine the first run through the testSelectedCardDetails function. It calls setNameCardIsFromField fine and does what it is meant to do. The second time through it dies with the console showing:

Uncaught TypeError: setNameCardIsFromField is not a function

What's up with that? I honestly don't know enough about how jQuery works to be able to nail the problem so I turn to the stackoverflow world begging for salvation from this madness. ;)

    function testSelectedCardDetails(cardName) {

        var cardTestInfoArray = [];

        $.ajax({
            url: 'includes/getCardAndSetDataViaAJAX.php',           
            type: 'POST',
            cache: false,
            async: false, // if set to true then the data doesn't get here fast enough to run commands in 'success'
            dataType: 'json',
            data: { callThis: "testSelectedCardDetails", thisCardName: cardName},
            error: function(data){
                console.log("AJAX failed to get card info.");
            },
            success: function(data) {                   

                $.map(data, function (value) { cardTestInfoArray = value; });
                cardPresentInfo['printings'] = cardTestInfoArray['printings'];

                //automatically set setNameCardIsFrom field
                setNameCardIsFromField(cardPresentInfo['printings']);
            }
        });
    }

Here's the function being called:

    function setNameCardIsFromField(setCode) {

        $.ajax({
            url: 'includes/getCardAndSetDataViaAJAX.php',           
            type: 'POST',
            cache: false,
            async: false,   // if set to true then the data doesn't get here fast enough to run commands in 'success'
            dataType: 'text',
            data: { callThis: "setNameCardIsFromField", thisSetCode: setCode},
            error: function(data){
                console.log("AJAX failed to get card info.");
            },
            success: function(setName) {
                //console.log(setName);
                setNameCardIsFromField = document.querySelector('#setNameCardIsFrom');
                setNameCardIsFromField.value = setName; 
            }
        });
    }

Answer 1

You overwrite the function:

 setNameCardIsFromField = document.querySelector('#setNameCardIsFrom');

Assuming it's global (which is generally bad).

Unrelated, but meh on using async: false , better to do it right than to hack around it, eg, callback, promise, whatever.