wie jquery Ereignisse durch Schaltfläche Onclick Funktionen

Question

wie zu handhaben jquery Ereignisse durch Schaltfläche Onclick Funktionen

HTML CODE

<div id="comments" class="cmt" > 
    <img width="30px" height="30px" src="/cropphoto/<?php echo getuserPhoto($d['uid']); ?>"> 
    <input class="commentbox" id="comment" name="comments" placeholder="Comment Here" maxlength="50" > 
    <input type="hidden" id="qid" name="qid " value="<?php echo $d['qid'];?>"> 
    <button type="button" id="comq" name="compost" onclick="my(event,<?php echo $d['qid'];?>);" class="butn2" >post comment</button> 
</div> 

AJAX JQUERY

$(document).ready(function() { 
    $("#comq").click(function my(e, id) { 
    var comment = $("#comment").val(); 
    var qid = $("#qid").val(); 

    alert(qid); 

    $.ajax({ 
     cache: false, 
     type: "post", 
     url: "jquery.php", 
     data: { 
     comments: comment, 
     qid: qid 
     }, 
     success: function(data) { 
     $("#comment").val(""); 
     $("").html(data); 
     } 
    }); 
    }); 

}); 

Kommentare nicht eingefügt zu handhaben in die Datenbank mit der Schaltfläche auf Klick-Funktion, aber ohne die Taste auf Tastendruck w orking fein Was den Fehler in meinem Code ist lass es mich wissen, ich bin jetzt in Ajax

Answer 1

Es gibt zwei Probleme.

Zuerst kann onclick nur Funktionen aufrufen, die sich im globalen Gültigkeitsbereich befinden. Ihre Funktion ist innerhalb von $(document).ready() definiert, also nicht im globalen Gültigkeitsbereich.

Zweitens definieren Sie die Funktion mithilfe eines benannten Funktionsausdrucks. Der Geltungsbereich dieses Namens ist nur der Rumpf der Funktion selbst. Siehe Why JavaScript function declaration (and expression)?

Da Sie die Funktion von onclick aufrufen, müssen Sie sie nicht in $("#comq").click() oder $(document).ready() einfügen.

Definieren Sie es einfach als eine normale Funktion im globalen Bereich. Und da Sie es als zweites Argument mit $d['qid'] aufrufen, müssen Sie in der Funktion nicht qid zuweisen. Sie brauchen auch nicht das Argument event, da Sie es nie in der Funktion verwenden (es wurde nur vorher benötigt, weil Sie die Funktion von $("#comq").click() aufgerufen haben).

Sie können nicht dieselbe ID mehrmals verwenden, ein Selektor für die ID findet nur das erste Element mit dieser ID, nicht das neben der Schaltfläche. Übergeben Sie die Schaltfläche als ein weiteres Argument an die Funktion, und verwenden Sie das, um das Kommentarfeld neben es zu erhalten.

HTML:

<div id="comments" class="cmt" > 
    <img width="30px" height="30px" src="/cropphoto/<?php echo getuserPhoto($d['uid']); ?>"> 
    <input class="commentbox" name="comments" placeholder="Comment Here" maxlength="50" > 
    <button type="button" name="compost" onclick="my(<?php echo $d['qid'];?>, this);" class="butn2" >post comment</button> 
</div> 

JS:

function my(qid, button) { 
    var comment = $(button).siblings(".commentbox").val(); 

    alert(qid); 

    $.ajax({ 
    cache: false, 
    type: "post", 
    url: "jquery.php", 
    data: { 
     comments: comment, 
     qid: qid 
    }, 
    success: function(data) { 
     $("#comment").val(""); 
     $("").html(data); 
    } 
    }); 
} 

Hier ist ein ausführbarer Code-Schnipsel, die es ohne AJAX demonstriert:

function my(qid, button) { 
 
    var comment = $(button).siblings(".commentbox").val(); 
 

 
    console.log("id = " + qid, " comment = " + comment); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="comments" class="cmt"> 
 
    <img width="30px" height="30px" src="/cropphoto/<?php echo getuserPhoto($d['uid']); ?>"> 
 
    <input class="commentbox" name="comments" placeholder="Comment Here" maxlength="50"> 
 
    <button type="button" name="compost" onclick="my(1, this);" class="butn2">post comment</button> 
 
</div> 
 
<div id="comments" class="cmt"> 
 
    <img width="30px" height="30px" src="/cropphoto/<?php echo getuserPhoto($d['uid']); ?>"> 
 
    <input class="commentbox" name="comments" placeholder="Comment Here" maxlength="50"> 
 
    <button type="button" name="compost" onclick="my(2, this);" class="butn2">post comment</button> 
 
</div>

Answer 2

allererst es, wie Sie zwei Argumente in Ihrem HTML zu senden versuchen, sieht: nur

onclick="my(event,<?php echo $d['qid'];?>); 

Aber die Funktion akzeptiert 1?

$("#comq").click (function my(e) { 

Ich bin mir nicht sicher, ob das dein Problem löst, aber du könntest dort anfangen.

Answer 3

oh bekam sie fügen Sie einfach einen weiteren Parameter mit ihm

$("#comq").click (function my(e, id) { 

oder was würde ich tun ist, ich eine Funktion definieren würde meine wie diese

function my(e, id){ 
$.ajax({ 
     cache:false, 
     type:"post", 
     url:"jquery.php", 
     data:{$("#comment").val(),qid:id}, 
     success:function(data) 
     { 
        $("#comment").val(""); 
        $("").html(data); 

     } 
} 

dies meiner Meinung nach mehr ordentlich aussieht

Answer 4

Zuerst Sie brauchen nicht zu verwenden:

$("#comq").click (function my(e... 

, weil Sie bereits Onclick haben (meine (a, b)). Erstellen Sie einfach eine Funktion wie:

function my(a, b){ 
     alert(a +" "+b) 
} 

Funktioniert das für Sie?

<html> 
<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<div id="comments" class="cmt" > 
    <img width="30px" height="30px" src="/cropphoto/<?php echo getuserPhoto($d['uid']); ?>"> 
    <input class="commentbox" id="comment" name="comments" placeholder="Comment Here" maxlength="50" > 
    <button type="button" id="comq" name="compost" onclick="my(2, 'test test')" class="butn2" >post comment</button> 

</div> 

<script> 
    function my(comment, qid){ 

     alert(comment + " - " + qid) 
     $.ajax({ 
      cache:false, 
      type:"post", 
      url:"jquery.php", 
      data:{comments:comment,qid:qid}, 
      success:function(data) 
      { 
       $("#comment").val(""); 
      } 
     }); 
    } 
</script> 

</body> 
</html>