资源

Question

我正在开发一个从GIPHY API返回GIF的项目，每当执行搜索时，我都会将每个搜索历史项目捕获为用户可以单击的自己的按钮并查看搜索结果而不是重新输入搜索。我成功地使用适当的类将按钮添加到HTML中，但是，当我尝试编写一个简单的点击事件时，例如$('.history-btn').on('click', function() { console.log('hello'); }); 没有出现。是什么造成的？这是我的整个上下文代码集：

$(document).ready(function () {
    

var searches = [];

function addSearch() {
    $(".prev-searches").empty();
    for (var i = 0; i < searches.length; i++) {
        var history = $('<button>');
        history.addClass("btn btn-primary history-btn");
        history.attr("data-name", searches[i]);
        history.text(searches[i]);
        $(".prev-searches").append(history);
    }
}


$('.history-btn').on('click', function() {
    console.log('hello');
});


function returnSearch() {
    var gifSearch = $(".search-input").val().trim();
    var queryURL = 'https://api.giphy.com/v1/gifs/search?api_key=XXXXX-HIDDEN-XXXXX&q=' + gifSearch + '&limit=15&offset=0&rating=PG&lang=en';
$.ajax({
    url: queryURL,
    method: "GET"
}).then(function(response){
    console.log(queryURL);
    console.log(response);
    console.log(response.data.length);
    for (var i =0; i < response.data.length; i++) {
        arrImg = response.data[i].images.fixed_width.url;
        var newContent = '';
        newContent = '<img src="' + arrImg + '">';
        $('.gif-area').html(newContent);
        console.log(newContent);
    }
});
}

//When search is executed
$('.search-btn').on('click', function() {
    event.preventDefault();
    var search = $('.search-input').val().trim();
    searches.push(search);
    addSearch();
    returnSearch();
});


function renderGIFs () {
    for (var i = 0; i < response.data.length; i++) {
    var newGifs = '';
    newGifs += '<img src="' + response.data[i].bitly_gif_url + '"';
    $(".gif-area").html(newGifs);
    }
}

});

Answer 1

您需要事件委派：

$('.prev-searches').on('click', '.history-btn', function() {
    console.log('hello');
});

资源

Understanding Event Delegation

Answer 2

班级＆＃39; history-btn＆＃39;从你的addSearch函数动态添加？那么请使用历史-btn的层次结构中的元素，并将事件绑定到该元素。

例如，我将事件绑定到div元素

<div id='historybtncontainer'>
    <button class='history-btn'>Button</button>
</div>

在脚本中你可以做

$('historybtncontainer').on('click', 'history-btn', function(){
    console.log("hello");
});

Answer 3

document允许您在将history-btn类动态添加到<button>

之后获取新的元素树

$(document).on('click', '.history-btn', function() {
console.log('hello');
});

jQuery On-click事件无法正常工作

3 个答案:

资源