javascript - 在 javascript 中创建的新按钮没有执行其他预设按钮正在执行的操作

Question

创建新按钮后，其余代码不会拾取它

var topics = ["dog", "cat", "pangolin", "snake", "bird", "emu", "cow", "hedgehog"]

$(document).ready(function () {

    $("#btnAddSubmit").click(function() {
        var newAnimal = $("#addInput").val();
        topics.push(newAnimal);
        newAnimal = newAnimal.toLowerCase();
        $("#buttons").append('<button id="gif' + newAnimal + '">' + newAnimal + '</button>');
    });

    $("button").click(function() {
        var currentGif = this.id;
        if (this.id != "submit") {
            currentGif = currentGif.replace("gif", "");
            currentGif = currentGif.toLowerCase();
            var topicNum = topics.indexOf(currentGif);
            var myUrl = "https://api.giphy.com/v1/gifs/search?q=" + topics[topicNum] + "&api_key=oaPF55NglUdAyYKwDZ0KtuSumMrwDAK9&limit=15";
            $.ajax({
                method: "GET",
                url: myUrl,
            }).then(function(response) {
                console.log(currentGif);
                console.log(response);
                $("#gifLocation").empty();
                var gifURL = response.data[0].images.fixed_width.url;

                console.log(response.data.length);
                var gifNum = response.data.length
                for (var i = 0; i < gifNum; i++) {
                    $("#gifLocation").append('<div id=gifDiv' + i + '></div>');
                    gifURL = response.data[i].images.fixed_width.url;
                    var gifRateId = "gifRate" + i;
                    var ratingLocString = '<p id="' + gifRateId + '"></p>'
                    var ratingLoc = $(ratingLocString);
                    var rating =  response.data[i].rating;
                    var gifRating = "Rating: " + rating;
                    $("#gifDiv" + i).append(ratingLoc);
                    $("#" + gifRateId).text(gifRating);
                    var gifId = "gif" + i;
                    var gifImage = $('<img class=gif id=' + gifId + '>');
                    gifImage.attr("src", gifURL);
                    $("#gifDiv" + i).append(gifImage);
                }
            });
            console.log(currentGif);
        }
    });
});

我想做的是，当用户创建一个新按钮时，该按钮将像预制按钮一样工作。预制按钮应该显示一些 GIF。

发生的情况是，在我创建新按钮后，单击该按钮甚至不会在控制台中记录该新按钮的 ID。

Answer 1

您的事件监听器$("#btnAddSubmit").click仅适用于已创建的按钮。这意味着您的新按钮将没有此监听器。如果您想向新按钮添加监听器，则必须执行以下操作:

// We are create event listener as a function for convenient use
var onButtonClick = function () {
    var currentGif = this.id;
    if (this.id != "submit") {
        currentGif = currentGif.replace("gif", "");

        // Your code here...
    }
}

$("#btnAddSubmit").click(function() {
    var newAnimal = $("#addInput").val();
    topics.push(newAnimal);
    newAnimal = newAnimal.toLowerCase();
    $("#buttons").append('<button id="gif' + newAnimal + '">' + newAnimal + '</button>');

    // We are remove all button's listeners and at once add new
    $("button").off('click').on('click', onButtonClick);
});

// And this code will add your listener as it was originally
$("button").off('click').on('click', onButtonClick);

如果您的按钮有其他事件监听器，请务必小心。如果存在，则不能使用 .off()。在这种情况下，正确的方法是为新的特定按钮的 id 添加监听器。