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？

来源

2017-04-24 fangio

请提供完整的代码段并添加HTML。 – Felix

@FelixHäberle全段，并添加HTML这 – fangio

尝试设置数据链接属性，然后使用$(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')); 
    });

来源

2017-04-24 11:29:09 Arkadi

工作，但如果我有50个按钮，我不知道ID – fangio

所以，你可以声明点击后'按类event';） – Arkadi

我更新的答案，请看看它 – Arkadi

添加点击功能的按钮，它已经被附加到体内后：

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); 
     } 
    }); 
}

来源

2017-04-24 11:38:20 thinhvo0108

$(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>

来源

2017-04-24 11:40:37

JQuery创建按钮但不可点击

回答

相关问题