如何将JavaScript附加到Font Awesome图标

Question

我在HTML中有一个fontawesome图标作为按钮，我想使用JavaScript并以AJAX方式触发它

<a href="#"><i id="heart" class="jam jam-heart-f"></i> Like</a>

这里是尝试使用JavaScript触发它的代码，但我没有收到任何错误提示。我试图将点赞尝试发送到一个名为like.php的PHP页面，以便将该链接添加到数据库中。

$(document).ready(function()
{

$('body').on("click",'#heart',function()
{
    var videoId = "<?php echo $video_id; ?>";


    var A=$(this).attr("id");
    var B=A.split("like");
    var messageID=B[1];
    var C=parseInt($("#likeCount"+messageID).html());


       $.ajax({
    method: 'POST',
    url: 'like.php',
    data: {videoId: videoId},
    cache: false,
        success: function(result){
            likeInfo = JSON.parse(result);
                    $("#likeCount1").html("Likes:" + likeInfo.likeCount);

            //document.getElementById("likeCount1").value = likeInfo.likeCount;
            //$("#likeCount1").html(likeCount);
        }

        }); 



    }


});

我认为JS似乎无法通过id="heart"来触发带有font awesome图标的#heart。你有什么想法，如何将它们结合起来？

- Fight Fire With Fire

---

为什么不直接在a元素上绑定事件处理程序呢？ - E. Sundin

你可以像这样绑定到父级元素 a：$('#heart').parent('a').on("click", function() { console.log('clicked') }) - E. Sundin

Answer 1

你的代码正确触发了post请求，但你没有正确关闭函数和作用域。

我在这里尝试了一下： http://jsfiddle.net/4cohrz5p/ 为了让stackoverflow满意，以下是代码：

$(document).ready(function() {

      $('body').on("click", '#heart', function() {
          var videoId = "<?php echo $video_id; ?>";


          var A = $(this).attr("id");
          var B = A.split("like");
          var messageID = B[1];
          var C = parseInt($("#likeCount" + messageID).html());


          $.ajax({
            method: 'POST',
            url: 'like.php',
            data: {
              videoId: videoId
            },
            cache: false,
            success: function(result) {
              likeInfo = JSON.parse(result);
              $("#likeCount1").html("Likes:" + likeInfo.likeCount);

              //document.getElementById("likeCount1").value = likeInfo.likeCount;
              //$("#likeCount1").html(likeCount);
            }
          });
      });
});

此外，Javascript控制台显示您的代码出现Uncaught SyntaxError: missing ) after argument list错误。当您单击心形图标时，打开网络选项卡以查看发出的请求，并可以检查它们以查看它们是否发送了正确的数据（以及响应！）。任何体面的JS编辑器在运行代码之前都会显示此错误。尝试使用VS Code。它是免费且轻量级的，整体非常不错。

- ippi

Answer 2

你忘记为 $('body').on... 语句添加闭合括号和分号了。

尝试使用以下代码：

$(document).ready(function()
{

    $('body').on("click",'#heart',function()
    {
        var videoId = "<?php echo $video_id; ?>";


        var A=$(this).attr("id");
        var B=A.split("like");
        var messageID=B[1];
        var C=parseInt($("#likeCount"+messageID).html());


           $.ajax({
        method: 'POST',
        url: 'like.php',
        data: {videoId: videoId},
        cache: false,
            success: function(result){
                likeInfo = JSON.parse(result);
                        $("#likeCount1").html("Likes:" + likeInfo.likeCount);

            //document.getElementById("likeCount1").value = likeInfo.likeCount;
            //$("#likeCount1").html(likeCount);
            }
        }); 
    });
});

- Quasi635