Question

我正在通过JSON从远程服务器检索数据并附加一个按钮：

$.getJSON('http://www.mysite.com/jsond1.php',

          function(data){
          jsonObject=eval(data);
          day1content = jsonObject.json1;

          //APPEND TO DIV
          $('#showday1').append(day1content);
          //CREATE BUTTON, ADD VALUE FROM
          var input = '<input type="button" class="save_event" value="Save to My Program" />';
          //ATTACH BUTTON
          $('.event').append(input);

这很好用。但我想在按钮上添加一个事件，即：

$('.save_event').click(function() {
                            console.log("HERE");
                 });

当我将它直接放在脚本下方时，没有任何反应。谁会知道为什么会这样？我是否需要使用JQuery Mobile做一些特别的事情？

Answer 1

使用此：

$(document).on('click','.save_event',function() {
    console.log("HERE");
});

如果您想了解有关甚至委派的更多信息，可以在此处找到：link。

另外，请不要忘记使用此功能增强按钮标记：

$('.save_event').button();

如果您想了解更多有关jQuery Mobile动态内容增强的其他文章： jQuery Mobile: Markup Enhancement of dynamically added content

Answer 2

您应该使用以下内容：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('.event').on('click', '.save_event', function(event) {
    event.preventDefault();
    alert('testlink'); 
    console.log("HERE");
});

这会将您的事件附加到.event元素中的任何输入，减少必须检查整个document元素树并提高效率的范围。

更多信息：

Answer 3

你必须在按钮创建后立即绑定。

为了安全起见，并且在同一个按钮上避免多个事件监听器，你必须在之前取消绑定;）

$.getJSON('http://www.mysite.com/jsond1.php',
          function(data){
              var jsonObject = eval(data),
              day1content = jsonObject.json1;

              // APPEND TO DIV
              $('#showday1').append(day1content);

              // CREATE/ATTACH BUTTON + ADD VALUE FROM
              $('.event').append('<input type="button" class="save_event" value="Save to My Program" />');

              // FOR SAFETY, UNBIND CLICK BEFORE BINDING : AVOID MULTIPLE BINDING
              $('.event .save_event').unbind('click');

              // ATTACH EVENT TO BUTTON
              $('.event .save_event').click(function() {
                        console.log("HERE");
             });
       });

Jquery Mobile：用JQuery创建了一个按钮，试图将click功能附加到它上面

3 个答案: