Jquery click event does not execute on first click

Question

I do not understand why I have to click on the link twice in JQuery:

$(function(){
    $("#more_reviewers").click(function(){
        $("#reviewer_list").html("<%= escape_javascript(render 'restaurants/restaurant_reviewer_list', :venue => @restaurant, :limit => @restaurant.reviews.count) %>");
    });
});

When I click, the view overrides the limit on the reviwers shown and shows all the reviewers. What I don't get is why I need to click on the same button twice. None of the other answers to similar questions have worked for me because the problem involves cookie reliance, or somehting else which I'm not doing.

I just tested one more thing: when I put an alert showing the event type, it shows nothing the first time (as if the JS script wasn't bound to the link) then the second time it alerts with the right event type ("click").

The link with ID "more_reviewers" is as follows in rails:

<%= link_to "more", "#", :id => "more_reviewers", :remote => true  %>

The link shows the right items, but only after being clicked twice (the first time, nothing appears to change on the page)

Help will be very appreciated.

Yes @Sagar_Jackey. I edited my question with the link information, here it is for you: — Laurent
– Laurent, Commented Mar 21, 2013 at 7:04
Remove :remote => true from your link_to. That's only useful if you want to use Rails' built in functionality for Ajax, but you are writing the Javascript bindings yourself, so it's useless and causes this unwanted effect of having to click twice. — Mischa
– Mischa, Commented Mar 21, 2013 at 7:56
Hi Mischa thanks for the response. But now the effect without :remote -> true is that a) if I put nothing in the destination part, it reloads the page or b) if I put javascript:void(0) it does nothing. — Laurent
– Laurent, Commented Mar 21, 2013 at 8:00

Mischa · Accepted Answer · 2013-03-21 08:08:14Z

4

Your show.js.erb should only contain:

$("#reviewer_list").html("<%= escape_javascript(render 'restaurants/restaurant_reviewer_list', :venue => @restaurant, :limit => @restaurant.reviews.count) %>");

Right now it you're binding a click event to a link you have already clicked, which means you have to click it again.

answered Mar 21, 2013 at 8:08

Mischa

43.4k9 gold badges101 silver badges111 bronze badges

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

8 Comments

Laurent Over a year ago

OK Mischa, first of all it worked. Thank you. Second, I'm confused. The Show view contains, among other buttons, the "more_reviewers" link. I thought when I load the show view, it also loads all the scripts in show.js.erb. It made sense that I should have an onclick listener (or equivalent) ready to react when there is a click. Here, it seems to me that by clicking on the link I am calling on all the show.js.erb code. What if I had other code not related to the link, say a listener for a click on a different link on the page?

Laurent Over a year ago

The reaction is also delayed with this solution. It responds to the click the first time, but the response is slower than after the second click of the previous implementation. Is this because the entire page is being reloaded remotely?

Mischa Over a year ago

No, it does not load show.js.erb. You should only use .js.erb files to return content after an Ajax call. For normal javascript use app/assets/javascripts/applition.js.

Mischa Over a year ago

Yes, it's doing an Ajax call, so the response is delayed.

Mischa Over a year ago

It seems all that code should be in your application.js file not in show.js.erb. Sorry, but I can give a precise answer, because it's not clear what you are trying to do and I can't see your code.

|

Benjamost · Accepted Answer · 2014-01-26 14:38:20Z

1

Just had an issue like this and you should be able to solve it like this (this enables you to do other js stuff in the same file and not in the application.js):

$(function(){
  $("#more_reviewers").bind('ajax:complete', function() {
    $("#reviewer_list").html("<%= escape_javascript(render 'restaurants/restaurant_reviewer_list', :venue => @restaurant, :limit => @restaurant.reviews.count) %>");
  });
});

answered Jan 26, 2014 at 14:38

Benjamost

315 bronze badges

Comments

codeVerine · Accepted Answer · 2013-03-21 07:08:06Z

0

Remove that '#' in your html code. Replace it with javascript:void(0);

<%= link_to "more", "javascript:void(0);", :id => "more_reviewers", :remote => true  %>

answered Mar 21, 2013 at 7:08

codeVerine

7623 silver badges14 bronze badges

5 Comments

Laurent Over a year ago

Unfortunately this doesn't work - the link ceases to respond entirely!

codeVerine Over a year ago

then try just removing the '#' like this: <%= link_to "more", "", :id => "more_reviewers", :remote => true %>

Laurent Over a year ago

Still the same problem. The click is registered but nothing happens the first time; it does register the click in the browser console. The second time, the click gets registered AND I see the proper behavior on the screen.

codeVerine Over a year ago

Try this : my first answer without the :remote tag <%= link_to "more", "javascript:void(0);", :id => "more_reviewers" %>

Laurent Over a year ago

Hi Sagar just tried that and nothing happens. The link doesn't register a click at all.

Sagar Bommidi · Accepted Answer · 2013-03-21 07:11:13Z

0

This also will work.

$("#more_reviewers").click(function(e){
    e.preventDefault();
    #.....
});

answered Mar 21, 2013 at 7:11

Sagar Bommidi

1,4098 silver badges12 bronze badges

3 Comments

Laurent Over a year ago

Thanks for helping out However, this yields the same behavior as before - I need to click twice!

Sagar Bommidi Over a year ago

You want to simply update the review_list on clicking that button? If so, can you try by changing the link_to into button tag.

Laurent Over a year ago

Still the same problem with a button. The click is registered but nothing happens the first time; it does register the click in the browser console. The second time, the click gets registered AND I see the proper behavior on the screen.

shweta · Accepted Answer · 2013-03-21 08:05:05Z

0

try:

<%= link_to "more", "", :id => "more_reviewers", :remote => true  %>

in my case

<%= link_to "more", "#", :id => "more_reviewers", :remote => true  %>

works too.

edited Mar 21, 2013 at 8:05

answered Mar 21, 2013 at 7:58

shweta

8,1792 gold badges43 silver badges44 bronze badges

2 Comments

Laurent Over a year ago

Hi Shweta, I tried this and obvs it didn't work. Which makes sense becaue the id is a DOM element ID not a param.

Laurent Over a year ago

Thanks Shweta. I tried both these solutions (based on other postings) and the problem persists: I always havve to click twice.

Jon Cairns · Accepted Answer · 2013-03-26 13:13:42Z

0

In Your Java Script Try including this:

<%= javascript_include_tag "jquery-1.8.3", "jquery.validate" %>

I think this will solve your problem as I got solutions using this

edited Mar 26, 2013 at 13:13

Jon Cairns

12k4 gold badges44 silver badges67 bronze badges

answered Mar 26, 2013 at 12:52

BPT

364 bronze badges

Collectives™ on Stack Overflow

Jquery click event does not execute on first click

6 Answers 6

8 Comments

Comments

5 Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

Comments

5 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related