javascript - 如何获取使用 jQuery 单击的提交按钮的自定义 ID？

Question

我一直在尝试将 php 变量调用到 jquery 提交 onclick 事件中，以便在提交回复时捕获评论的 ID 以由 ajax 代码进行处理。

$(document).ready(function() {
  $("#submit").click(function(e) {
    var rname = $("#rname").val();
    var remail = $("#remail").val();
    var rmessage = $("#rmessage").val();
    var cid = $("#cid").val();
    var post_id = $("#post_id").val();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" name="submit" id="submit'.$commnt_id.'" value="Reply This Comment" class="primary-btn text-uppercase" />

Answer 1

有很多选择可以实现这一点:

方案一(使用数据属性):

<input type="submit" name="submit" data-commentID="<?=$commnt_id?>" value="Reply This Comment" class="primary-btn text-uppercase myBtnClass"/>

jQuery:

$(document).ready(function(){
    $(".myBtnClass").click(function(){
        var commentId = $(this).attr('data-commentID');
    }); 
});

方案二(使用onclick事件):

<input type="submit" name="submit" onclick="mymethodCall(<?=$commnt_id?>)"  value="Reply This Comment" class="primary-btn text-uppercase"/>

JavaScript:

function mymethodCall(commentId){
    console.log(commentId);
}

在解决方案 1 中，如果您有多个记录，使用类名 myBtnClass 会有所帮助。

运行示例:

$(document).ready(function(){
	$(".myBtnClass").click(function(){
        var commentId = $(this).attr('data-commentID');
        alert(commentId);
   });	
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" name="submit" data-commentID="1" value="Reply This Comment" class="primary-btn text-uppercase myBtnClass"/>

运行示例 2:

function mymethodCall(commentId){
	console.log(commentId);
}

<input type="submit" name="submit" onclick="mymethodCall(1)"  value="Reply This Comment" class="primary-btn text-uppercase"/>