在 javascript 中创建的新按钮没有做其他预设按钮正在做的事情

Posted 2023-03-25

【中文标题】在 javascript 中创建的新按钮没有做其他预设按钮正在做的事情

【英文标题】：New button created in javascript isn't doing what other pre set buttons are doing

【发布时间】：2020-01-04 16:29:51

【问题描述】：

当一个新按钮被创建时，它不会被其余代码拾取

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。

【参考方案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 添加侦听器。

【参考方案2】：

根据您的问题和提供的js 代码，我猜这是因为新添加的按钮没有收到事件。 所有事件都在页面加载时附加到 dom。注入 DOM 的新按钮不会获​​得事件。在注入新代码之前，jQuery 已经完成了对 DOM 元素的绑定。要解决这个问题，您必须在 jQuery 中使用 '.on() 方法

类似的东西

$(document).on('click','your_button_class_here',function()
    dosomething();    
);

【参考方案3】：

您正在使用 ready 回调，因此所有这些都在 DOM 准备就绪时运行。但是，直到这个 ready 回调已经运行，您才真正创建新按钮！因此，当您尝试使用 $("button").click(function()) 添加回调时，您正在尝试将该回调添加到 DOM 上的所有按钮...但是您想要添加到的某些按钮还不存在。在执行第一个按钮的点击回调之前，它们不会存在！因此，您创建的第一个按钮将附加回调，但新按钮不会。

也许可以尝试这样的事情？我预计this 的值在您的click 回调上的工作方式会出现问题，但我认为这是朝着正确方向的推动。

$(document).ready(function () 

    $("#btnAddSubmit").click(function () 
        var newAnimal = $("#addInput").val();
        topics.push(newAnimal);
        newAnimal = newAnimal.toLowerCase();
        $("#buttons").append('<button id="gif' + newAnimal + '">' + newAnimal + '</button>');
        // be wary of what the value of `this` refers to! it might refer to 
        // the `this` of the scope in which it was defined!
        function gifCallback() 
            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);
            
        ;
        // reference the new button by its ID and add your desired callback
        $("#gif").click(gifCallback)
    );
);