Jquery Click Event Not Firing On First Click, but does on second click, why?

Question

I've got a jQuery code, which

$("a.reply").click(function() {
//code
});

When I click the link with .reply class the first time, nothing happens. The second time I click, the code inside the click function works.

The link is being inserted on the page using PHP from a mysql database. so it's not being inserted dynamically.

Why is this happening? Any solution?

The BadASS Code:

$(function(){
//TextArea Max Width
var textmaxwidth = $('#wrapper').css('width');
//Initialize Focus ids To Different Initially
var oldcommentid = -1;
var newcommentid = -2;
//End Of initialization

$("a.reply").click(function() {
        newcommentid = $(this).attr('id');
        if (newcommentid == oldcommentid)
        {
        oldcommentid=newcommentid;
        $("#comment_body").focus();
        }
        else
        {
        $('#comment_form').fadeOut(0, function(){$(this).remove()});
        var commetformcode = $('<form id="comment_form" action="post_comment.php" method="post"><textarea name="comment_body" id="comment_body" class="added_comment_body" rows="2"></textarea> <input type="hidden" name="parent_id" id="parent_id" value="0"/> <div id="submit_button"> <input type="submit" value="Share"/><input type="button" id="cancelbutton" value="Cancel"/></div></form>');
        commetformcode.hide().insertAfter($(this)).fadeIn(300);
        //
        var id = $(this).attr("id");
        $("#parent_id").attr("value", id);
        oldcommentid=newcommentid;
        //dynamicformcreation function
        dynarun();
        //
        }



        return false;
    });

        dynarun();
        
        function dynarun()
        {
        //Form Re-Run Functions
        $('#comment_body').elastic();
        texthover();
        $("#comment_form input, select, button").uniform();
        textareasizer();
        $("#comment_body").focus();
        $("abbr.timestamp").timeago();
        return false;
        }
        
        //TextArea Resizer Function
        function textareasizer(){$("#comment_body").css('max-width', textmaxwidth);return false;}
        
        //Other Miscellaneous Functions
        $('.comment-holder').hover(
        function(event) {
            $(this).addClass('highlight');
        },
        function(event) {
            $('.comment-holder').removeClass('highlight');
        }
        );

        function texthover()
        {
        $('.added_comment_body').hover(
            function(event) {
                $(this).parent().parent().addClass('highlight');
            },
            function(event) {
                $('.comment-holder').removeClass('highlight');
            }
        );
        return false;
        }
});

Going to need more code here, please post the relevant generated HTML. — The Scrum Meister, Feb 19 '11 at 10:51
My first thought would be it comes from ["event bubbling"](http://www.quirksmode.org/js/events_order.html). Can you post your HTML ([use JSFIDDLE](http://jsfiddle.net/) for that)? — Baztoune, Feb 19 '11 at 10:53
Looks like problem is elsewhere. Does it work if you replace the code inside the click function with alert(1)? — Alexey Lebedev, Feb 19 '11 at 10:55
@the_archer: do you get any error on the first click? Can you check that out with firebug or pressing Cntr+Shift+J in FF? — Sarfraz, Feb 19 '11 at 10:57
on first click, only this appears in console: Lost Focus: Received Focus: <a class="reply external-link" href="#comment_form" id="2"></a> — Hirvesh, Feb 19 '11 at 11:03
However, the code code runs perfectly fine in Google Chrome, but doesn't work in FF and IE — Hirvesh, Feb 19 '11 at 11:04

score 9 · Accepted Answer · answered Feb 19 '11 at 11:06

9

This is a longshot, but are you running some sort of tracking script? Like webtrends or coremetrics (or even some of your own script, that's globally looking for all clicks)? I ran into a similar problem a while ago, where the initial-click was being captured by coremetrics. Just a thought.

answered Feb 19 '11 at 11:06

TNC

5,388
1
26
28

hmm...good thinking. I have tons of script working in the background. Gonna disable them and see. – Hirvesh Feb 19 '11 at 11:10
you nailed it man. There was a form styling script I was using. Removing the script does the trick. Now everything works. – Hirvesh Feb 19 '11 at 11:11
1

the script in question was jquery uniform. http://pixelmatrixdesign.com/uniform/ I wish I could kick that developer in the ass. – Hirvesh Feb 19 '11 at 11:12
@yoda a common problem with very little explanation of it on the web O_O You can't believe the amount of I was sitting here researching and pulling my hair out. – Hirvesh Feb 19 '11 at 11:16
@True North Creative thanks once more...wasn't such a longshot with your guess huh... :p – Hirvesh Feb 19 '11 at 11:17
@the_archer: actually there's lots of information about it, but since most people having trouble with it have no substancial knowlenge of javascript, it's hard to google for a solution. – yoda Feb 19 '11 at 11:19
@yoda you're right. It's only my 3 weeks into javascript :) – Hirvesh Feb 19 '11 at 11:27

score 2 · Answer 2 · answered Feb 19 '11 at 10:52

2

Does it still happen if you comment out all your code and simply have an alert("hi") inside the click function?

Update

I think Sarfaz has the right idea, but I would use the document ready function like so

$(document).ready(function(){
  $("a.reply").click(function() {
    //code
  });
});

answered Feb 19 '11 at 10:52

Chris

26,744
48
193
345

nope, even with document ready and only a simple click function with an alert inside it does not work. – Hirvesh Feb 19 '11 at 11:00
that approach is essentially the same. – yoda Feb 19 '11 at 11:01
1

If it works the second time, document.ready isn't likely to help here, though it is a good practice to use it. – unclenorton Feb 19 '11 at 11:05
isn't $(function(){ supposed to be a shorthand for document ready? :p – Hirvesh Feb 19 '11 at 11:09

score 0 · Answer 3 · answered Mar 10 '18 at 03:37

0

I just ran into same problem and I resolved my problem by removing:

<script src="bootstrap.js"></script>

you can use bootstrap.min.js

answered Mar 10 '18 at 03:37

Hesam Esfahlani

11
2

score 0 · Answer 4 · 2021-02-11T10:18:19.493

Use Inline CSS for hiding div and use JS/jQuery to show . This way Jquery Click Event will Fire On First Click

     <div class="about-block">
      <div class="title">About us</div>
        <div class="" id="content-text" style="display:none;">
            <p>Show me.</p>
        </div>
    </div>

        <script>     
         var x = document.getElementById("content-text");
             jQuery( '.about-block' ).click(function() {
               if (x.style.display === "none") {
                  x.style.display = "block";             

                } else {
                  x.style.display = "none";
                }
             });
      </script>

Jquery Click Event Not Firing On First Click, but does on second click, why?

4 Answers4

Linked