Question

如何通过按钮onclick功能来处理jquery事件

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

});

注释没有插入到数据库中，单击功能上的按钮，但没有按钮上的按键工作正常我的代码中的错误是什么，请让我知道我现在在ajax

Answer 1

首先，您似乎试图在HTML中发送2个参数：

.entries {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 1px;
  padding-top: 1px;
  border-top: 1px solid #901a1e;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.entry {
  flex: 1 1 auto;
  padding: 11px 0;
  width: 100%;
  text-align: center;
  background: #f3f3f1;
  background: linear-gradient(to bottom, #f3f3f1 0%, #edece9 100%);
  position: relative;
}

.entry a {
  font-size: 15px;
  display: inline-block;
  letter-spacing: 0.06em;
  line-height: 20px;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  color: #666;
}

.entry>a:before {
  font-size: 14px;
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  color: #901a1e;
  content: '>';
  font-weight: 700;
}

.entry+.entry:after {
  content: '';
  width: 1px;
  height: 70%;
  position: absolute;
  top: 6px;
  left: 0;
  background-color: #901a1e;
}

但该功能只接受1？

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

我不确定这是否能解决您的问题，但您可以从那里开始。

Answer 2

哦，只需用它添加另一个参数

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

或者我会做的是我会定义一个像我这样的函数

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

        }
}

在我看来这看起来更整洁

Answer 3

有两个问题。

首先，onclick只能调用全局范围内的函数。您的函数在$(document).ready()内定义，因此它不在全局范围内。

其次，您使用命名函数表达式定义函数。此名称的范围仅是函数本身的主体。见Why JavaScript function declaration (and expression)?

由于您从onclick调用该函数，因此无需将其放在$("#comq").click()或$(document).ready()中。

只需将其定义为全局范围内的普通函数即可。由于您使用$d['qid']作为第二个参数调用它，因此您无需在函数中分配qid。你也不需要event参数，因为你从不在函数中使用它（之前只需要它，因为你从$("#comq").click()调用函数）。

您不能多次使用相同的ID，ID的选择器将只找到具有该ID的第一个元素，而不是按钮旁边的ID。将该按钮作为该函数的另一个参数传递，并使用该按钮获取与其相邻的注释框。

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

这是一个可执行代码段，无需AJAX即可演示它：

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 4

首先，您不需要使用：

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

因为你已经有onclick（我的（a，b））。只需创建一个类似的函数：

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

这对你有用吗？

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

如何通过按钮onclick函数处理jquery事件

4 个答案: