Jquery-Klick-Ereignis nicht auf den ersten Klick auslösen, aber tut auf den zweiten Klick, warum?

Question

Ich habe einen jQuery-Code, der

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

Wenn ich auf den Link mit .reply Klasse das erste Mal, passiert nichts. Beim zweiten Mal, wenn ich klicke, funktioniert der Code in der Klickfunktion.

Der Link wird mit PHP aus einer Mysql-Datenbank in die Seite eingefügt, er wird also nicht dynamisch eingefügt.

Warum ist das so? Gibt es eine Lösung?

Der 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;
        }
});

Answer 1

Es ist eine weit hergeholte Vermutung, aber führen Sie eine Art von Tracking-Skript aus? Wie Webtrends oder Coremetrics (oder sogar ein eigenes Skript, das global nach allen Klicks sucht)? Ich hatte vor einiger Zeit ein ähnliches Problem, bei dem der erste Klick von coremetrics erfasst wurde. Nur ein Gedanke.

Answer 2

Tritt das Problem auch dann auf, wenn Sie Ihren gesamten Code auskommentieren und einfach eine alert("hi") innerhalb der Klickfunktion?

Update

Ich denke, Sarfaz hat die richtige Idee, aber ich würde die Funktion "Dokument bereit" wie folgt verwenden

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

Answer 3

Ich hatte gerade dasselbe Problem und konnte es durch Entfernen des Programms lösen:

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

Sie können bootstrap.min.js verwenden

Answer 4

Verwenden Sie Inline-CSS zum Ausblenden von div und verwenden Sie JS/jQuery zum Anzeigen. Auf diese Weise wird das Jquery Click Event beim ersten Klick ausgelöst.

     <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>