Jquery Mobile: created a button with JQuery, trying to attach click function to it

Question

I am retrieving data from a remote server via JSON and attaching a button to it:

$.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);

This works fine. But I want to attach an event to the button, ie:

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

and when I place this directly below the script above nothing happens. Would anyone know why this is occuring? Do I need to to something special with JQuery Mobile?

Are you getting JSON containing JSON, as you are using `eval` on the data? The `getJSON` method already parses the JSON for you. — Guffa, May 21 '13 at 06:44
Where are you putting the `click` function ? Have you tried execute it on console ? — Steely Wing, May 21 '13 at 06:47

score 1 · Answer 1 · edited May 23 '17 at 12:11

Use this:

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

If you want to find out more about even delegation you can find it here: link.

Also do not forget to enhance your button markup with this:

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

If you want to find out more read my other article about jQuery Mobile dynamic content enhancement: jQuery Mobile: Markup Enhancement of dynamically added content

score 1 · Answer 2 · answered May 21 '13 at 06:48

1

You should use the following:

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

This will attach your event to any input within the .event element, reducing the scope of having to check the whole document element tree and increasing efficiency.

More info here:

answered May 21 '13 at 06:48

palaѕн

72,112
17
116
136

Really weird! Try commenting out `event.preventDefault()` – palaѕн May 21 '13 at 07:05
Nope - alerts still ok, but still no console.log – MeltingDog May 21 '13 at 07:07
yes I am. It also seems it no longer recognises 'this' as in alert($('this').html()); – MeltingDog May 21 '13 at 07:41
Try killing the Chrome process and restarting it? – palaѕн May 21 '13 at 07:44

score 0 · Answer 3 · answered May 21 '13 at 06:52

you just have to bind right AFTER the button was create.

For safety, and avoid multiple event listener on the same button, you have to unbind before ;)

$.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: created a button with JQuery, trying to attach click function to it

3 Answers3