Question

我有代码创建一个html文件的主体。我用JQuery创建它。

代码如下：

SCRIPT JS

$(document).ready(function(){
   homePage();
});

function homePage(){
$.ajax({
    url: "http://events.restdesc.org/",
    type: "GET",
    dataType:'json',
    success: function (response) {
        var data = response;
        var html = $("<h1></h1>").text(data.title);
        var br = $("<br>");
        var eventbtn = $('<input />', {
            type  : 'button',
            id    : 'eventbutton',
            value : 'Events',
            on    : {
                click: getevents(data.events)
            }
        });
        html.append(br,eventbtn).appendTo($("body"));

    },

    error: function(error){
        console.log("the page was not loaded", error);
    },

});
}

function getevents(url){
    console.log(url);
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
    <script src="script.js"></script>
</head>
</body>
</html>

打开index.html时会直接调用函数homePage。它确实有效，我看到一个标题和一个按钮，但是代码会自动触发，它会在控制台中打印url。但是当我点击它时，它不会在控制台中打印出来。当我点击按钮时，如何更改代码以获得仅打印给定网址的按钮？

Answer 1

尝试设置data-url属性，然后使用$(this)：

访问它

function homePage(){
    $.ajax({
        url: "http://events.restdesc.org/",
        type: "GET",
        dataType:'json',
        success: function (response) {
            var data = response;
            var html = $("<h1></h1>").text(data.title);
            var br = $("<br>");
            var eventbtn = $('<input />', {
                type  : 'button',
                id    : 'eventbutton',
                value : 'Events',
            });
            eventBtn.addClass('dynamic-btn');
            eventbtn.data('url', data.events);

            html.append(br,eventbtn).appendTo($("body"));
        },
        error: function(error){
            console.log("the page was not loaded", error);
        }
    });
}


$(document).on('click', '.dynamic-btn', 
    function (e) {
        console.log($(this).data('url'));
    });

Answer 2

在按钮添加到正文后添加点击功能：

function homePage(){
    $.ajax({
        url: "http://events.restdesc.org/",
        type: "GET",
        dataType:'json',
        success: function (response) {
            var data = response;
            var html = $("<h1></h1>").text(data.title);
            var br = $("<br>");
            var eventbtn = $('<input />', {
                type  : 'button',
                id    : 'eventbutton',
                value : 'Events',
                on    : {
                    click: getevents(data.events)
                }
            });
            html.append(br,eventbtn).appendTo($("body"));

            eventbtn.click(getevents(data.events));
        },
        error: function(error){
            console.log("the page was not loaded", error);
        }
    });
}

Answer 3

$(document).ready(function(){
       homePage();
     });
    function homePage(){
    $.ajax({
    url: "http://events.restdesc.org/",
    type: "GET",
    dataType:'json',
    success: function (response) {
        var data = response;
        var html = "<h1>"+data.title+"</h1>";
        html += "<br>";
        html += '<input type="button" id="eventbutton" value="Events"/> ';
        $("body").append(html);
        $('input').click(function(){
            getevents(data.events);
        });                                    
    },

    error: function(error){
        console.log("the page was not loaded", error);
    },
   });
   }
   function getevents(url){
    console.log(url);
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JQuery创建按钮但不可点击

3 个答案: