我有创建 html 文件正文的代码。 我用 JQuery 创建它。
代码如下:
脚本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。但是当我点击它时，它不会在控制台中打印它。 我需要如何更改我的代码才能获得一个在单击按钮时仅打印给定网址的按钮？
最佳答案
尝试设置 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'));
});
关于javascript - JQuery 创建按钮但不可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43586441/