.prop("disabled", true) on click 不适用于 i 元素？答案

【问题标题】：.prop("disabled", true) on click not working for i element?.prop("disabled", true) on click 不适用于 i 元素？
【发布时间】：2020-04-15 20:10:15
【问题描述】：

当它 .prop("disabled", true) 用于输入元素时它可以工作，但是该输入元素需要替换为 i 元素并且由于某种原因它不起作用？知道为什么吗？如果可能，请指出任何重复项？

EJS 代码：

                    <div class="bubble sender first">
                        <li class = "display"><%= chats[i].msg %> &nbsp; &nbsp;
                            <i class="fas fa-heart" aria-hidden="true"></i>
                            <input type="hidden" id = "changeit" class = "likebutton" value = "Likes: (<%=chats[i].likes%>)" > 
                            <input type="hidden" class = "hiddentag" value="<%=chats[i].msg%>"> <!-- needed to get the message that was liked-->
                            <input type="hidden" class = "hiddendatetag" value="<%=chats[i].date%>"> <!-- needed to filter messages that are the same-->
                        </li>
                        <br>
                        <span>Sent: <%= chats[i].date%> </span>
                    </div>

JQuery 代码：


  $('i').on('click', function(){ // hit like    
    var data = $(this).next('input').val(); // get value of likes
    var msgdata = $(this).next().next('input').val(); //gets the message that was selected
    var datedata = $(this).next().next().next('input').val(); // get the date val
    $(this).toggleClass('clicked');
    $(this).prop("disabled", true); // BUG: INFITINITE LIKES ON A POST FIX THIS!!
    var likedmsg = {msg: msgdata, likes: '-1', date: datedata}; //dictates a message was liked so find it in database and update it
    $.ajax({ //do something with the data via front-end framework, so we can update in reall time
      type: 'GET',
      url: '/',
      success: function(err){
        $.ajax({
          type: 'POST',
          url: '/',
          data: likedmsg,
          success: function(data){
            //do something with the data via front-end framework, so we can update in reall time
            console.log("Success. Like submitted");
          }
        });
        return false;        
        console.log('success!'); 
      }
    });
      return false;

    });

【问题讨论】：

disabled 属性仅对
您需要知道谁在页面加载时点击了类似（需要 id 属性），然后切换 +1、0 和 -1。除非知道谁点击了什么，否则无法控制...因此您首先需要某种用户登录。
AS disable 不是i 元素的属性，我猜你想取消绑定点击回调，所以它不能被点击第二次。
@Twisty 这就是我想做的。

标签： jquery node.js ejs

【解决方案1】：

我建议使用.off() 功能。

$('i').on('click', function(e) {    
  var data = $(this).next('input').val(); // get value of likes
  var msgdata = $(this).next().next('input').val(); //gets the message that was selected
  var datedata = $(this).next().next().next('input').val(); // get the date val
  $(this).toggleClass('clicked');
  $(this).off("click") // Disable further clicks
  var likedmsg = {
    msg: msgdata,
    likes: '-1',
    date: datedata
  }; //dictates a message was liked so find it in database and update it
  $.ajax({ //do something with the data via front-end framework, so we can update in reall time
    type: 'GET',
    url: '/',
    success: function(err) {
      $.ajax({
        type: 'POST',
        url: '/',
        data: likedmsg,
        success: function(data) {
          //do something with the data via front-end framework, so we can update in reall time
          console.log("Success. Like submitted");
        }
      });
      return false;
      console.log('success!');
    }
  });
  return false;
});

查看更多：

https://api.jquery.com/off/

【讨论】：