Button JQuery event only working once, why?

Question

<script>
        $("button").on("click", function() {
            $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
                $(".author").html(json[0].title);
                $(".quote").html('"'+json[0].content+'"');
            });
        });

    </script>

Situation: I click, the data is loaded. I click again, nothing changes.

Codepen: http://codepen.io/anon/pen/vxGgaZ

Reference: https://quotesondesign.com/api-v4-0/

Any errors in the console? Obviously visibly nothing will happen after the first getJSON call because you have already rendered the html the first time. If the request is not firing the second time then you need to check for errors. — curv
– curv, Commented Mar 2, 2017 at 21:16
Are you sure the data on the server is changing between clicks? — CamJohnson26
– CamJohnson26, Commented Mar 2, 2017 at 21:17
Is the button a child element of .author and/or .quote? If so you have to use event-delegation for it to work — empiric
– empiric, Commented Mar 2, 2017 at 21:18
@CamJohnson26 you can check by yourself with the url. It changes. — Coder1000
– Coder1000, Commented Mar 2, 2017 at 21:18

guest271314 · Accepted Answer · 2017-03-02 21:56:07Z

2

The problem is because the first response is being cached. You can solve that by adding a $.ajaxSetup() call which stops the caching:

$.ajaxSetup({
  cache: false
})

Updated Codepen

Alternatively, use $.ajax() and set cache directly in the settings:

$("button").on("click", function() {
  $.ajax({  
      url: 'http://quotesondesign.com/wp-json/posts',
      type: 'get',
      cache: false,
      data: 'filter[orderby]=rand&filter[posts_per_page]=1', 
      success: function(json) {
        $(".author").html(json[0].title);
        $(".quote").html('"' + json[0].content + '"');
      }
  });
});

edited Mar 2, 2017 at 21:56

guest271314

1

answered Mar 2, 2017 at 21:31

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

empiric Over a year ago

That's what I was searching for, couldn't remember the exact code for this

guest271314 Over a year ago

Is resource served with CORS headers?

guest271314 Over a year ago

@RoryMcCrossan Still have not found a way to navigate codepen interface. stacksnippets uses http://null as origin, though was able to get resource using <link> element at plnkr. Note ); following success at javascript at Question.

Community · Accepted Answer · 2020-06-20 09:12:55Z

-1

Try Like This:

Maybe it's help you

<script>
        $(document.body).on("click", 'button', function() {
            $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
                $(".author").html(json[0].title);
                $(".quote").html('"'+json[0].content+'"');
            });
        });

    </script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 2, 2017 at 21:18

Omar

5275 silver badges21 bronze badges

1 Comment

Coder1000 Over a year ago

Did not change anything.

Collectives™ on Stack Overflow

Button JQuery event only working once, why?

2 Answers 2

3 Comments

Try Like This:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Try Like This:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related