简体   繁体   中英

How to attach javascript to a font awesome icon

I have a fontawesome icon in my HTML as a button and i'd like to use javascript and trigger it AJAX style

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

Here is the attempt at javascript to trigger it - but I dont get any errors to follow up on. I try to post the like attempt to a PHP page like.php to add the link to a database.

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

        }); 



    }


});

I dont think #heart seems to be triggered in JS by the id="heart" with the font awesome icon. Any ideas how I can rig this together

Your code triggers the post-request correctly, but you are not closing your functions and scopes correctly.

I tried it out here: http://jsfiddle.net/4cohrz5p/

And code to keep stackoverflow happy:

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

Besides, the javascript console shows Uncaught SyntaxError: missing ) after argument list for your code. And you open the network-tab when you click the heart to see outgoing requests and can inspect them to see that they send the correct data (and the response too!).

Any decent js editor would have shown this error before even running the code. Try VS Code . Free and lightweight and pretty great overall.

You forgot to add closing parenthesis and semicolon for your $('body').on... statement

Try this:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM