JQuery创建按钮但不可点击
问题描述:
我有创建html文件主体的代码。 我用JQuery创建它。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功能主页被直接调用。 它确实有效,我看到一个标题和一个按钮,但是代码自动触发,它会在控制台中打印URL。但是当我点击它时,它不会在控制台中打印它。 我如何需要更改我的代码,以获得一个按钮,当我点击按钮时只打印给定的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'));
});
答
添加点击功能的按钮,它已经被附加到体内后:
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);
}
});
}
答
$(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>
请提供完整的代码段并添加HTML。 – Felix
@FelixHäberle全段,并添加HTML这 – fangio