Question

我正在处理一个聊天应用程序，我无法调用更新有关喜欢的信息的jquery函数。当附加到函数调用的元素最初是包含jquery代码的php页面的一部分时，代码工作。当动态添加元素时，函数调用不起作用。下面是脚本和调用函数的php行。

<script type="text/javascript">
    function addLikes(ID,action) {
      $('.demo-table #tutorial-'+ID+' li').each(function(index) {
      $(this).addClass('selected');
      $('#tutorial-'+ID+' #rating').val((index+1));
      if(index == $('.demo-table #tutorial-'+ID+' li').index(obj)) {
        return false;   
      }
    });
    $.ajax({
      url: "add_likes.php",
      data:'ID='+ID+'&action='+action,
      type: "POST",
      beforeSend: function(){
        $('#tutorial-'+ID+' .btn-likes').html("<img src='LoaderIcon.gif' />");
    },
    success: function(data){
      var likes = parseInt($('#likes-'+ID).val());
      switch(action) {
        case "like":
          $('#tutorial-'+ID+' .btn-likes').html('<input type="button" title="Unlike" class="unlike" onClick="addLikes('+ID+',\'unlike\')" />');
          likes = likes+1;
        break;
        case "unlike":
          $('#tutorial-'+ID+' .btn-likes').html('<input type="button" title="Like" class="like"  onClick="addLikes('+ID+',\'like\')" />')
          likes = likes-1;
        break;
      }
      $('#likes-'+ID).val(likes);
      if(likes>0) {
        $('#tutorial-'+ID+' .label-likes').html(likes+" Like(s)");
      } else {
        $('#tutorial-'+ID+' .label-likes').html('');
      }
    }
  });
}
</script>

调用addLikes函数的元素：

echo "<input" ." type='" ."button'" ." title='" .ucwords($str_like) ."'" ." class='" .$str_like ."'" ." onClick='" ."addLikes" ."(" .$uploadedpics['ID'] ."," .$str_like .")'" ."/>" ;

$str_like可以是或不同（行动）。

调用上面调用的函数会出现什么问题？任何回复都将不胜感激。

Answer 1

onclick函数不是制作它的好方法。您可以将数据添加到数据标记中。

IE：data-pics = $ uploadedpics [＆＃39; ID＆＃39;]和数据类似= $ str_like

<强> PHP

echo "<input type='button' title='" .ucwords($str_like) ."'" ." class='yourUniqueClass'" ." data-pics='" .$uploadedpics['ID'] ."' data-like='" .$str_like ."' />" ;

现在您可以通过Jquery直接访问此页面。使用jquery click函数添加唯一的（"yourUniqueClass"）类名称和访问数据。

$(document).on("click","yourUniqueClass", function(){
    addLikes( $(this).attr("data-pics"), $(this).attr("data-like") )
})

<强> Jquery的

<script type="text/javascript">
    $(document).ready(function () {
        function addLikes(ID,action) {
            $('.demo-table #tutorial-'+ID+' li').each(function(index) {
              $(this).addClass('selected');
              $('#tutorial-'+ID+' #rating').val((index+1));
              if(index == $('.demo-table #tutorial-'+ID+' li').index(obj)) {
                return false;   
              }
            });
            $.ajax({
              url: "add_likes.php",
              data:'ID='+ID+'&action='+action,
              type: "POST",
              beforeSend: function(){
                $('#tutorial-'+ID+' .btn-likes').html("<img src='LoaderIcon.gif' />");
            },
            success: function(data){
              var likes = parseInt($('#likes-'+ID).val());
              switch(action) {
                case "like":
                  $('#tutorial-'+ID+' .btn-likes').html('<input type="button" title="Unlike" class="unlike" onClick="addLikes('+ID+',\'unlike\')" />');
                  likes = likes+1;
                break;
                case "unlike":
                  $('#tutorial-'+ID+' .btn-likes').html('<input type="button" title="Like" class="like"  onClick="addLikes('+ID+',\'like\')" />')
                  likes = likes-1;
                break;
              }
              $('#likes-'+ID).val(likes);
              if(likes>0) {
                $('#tutorial-'+ID+' .label-likes').html(likes+" Like(s)");
              } else {
                $('#tutorial-'+ID+' .label-likes').html('');
              }
            }
            });
        }
        $(document).on("click",".yourUniqueClass", function(){
            addLikes( $(this).attr("data-pics"), $(this).attr("data-like") )
        })
    })
</script>

<强>更新

将click功能添加到document.ready

$(document).ready(function () { 
    $(document).on("click","#buttlike", function(){ 
        addLikes( $(this).attr("data-pic"), $(this).attr("data-action") )
    })
     function addLikes(ID,action) {
          $('.demo-table #tutorial-'+ID+' li').each(function(index) {
          $(this).addClass('selected');
          $('#tutorial-'+ID+' #rating').val((index+1));
          if(index == $('.demo-table #tutorial-'+ID+' li').index(obj)) {
            return false;   
          }
        });
        $.ajax({
          url: "add_likes.php",
          data:'ID='+ID+'&action='+action,
          type: "POST",
          beforeSend: function(){
            $('#tutorial-'+ID+' .btn-likes').html("<img src='LoaderIcon.gif' />");
        },
        success: function(data){
          var likes = parseInt($('#likes-'+ID).val());
          switch(action) {
            case "like":
              $('#tutorial-'+ID+' .btn-likes').html('<input type="button" title="Unlike" class="unlike" onClick="addLikes('+ID+',\'unlike\')" />');
              likes = likes+1;
            break;
            case "unlike":
              $('#tutorial-'+ID+' .btn-likes').html('<input type="button" title="Like" class="like"  onClick="addLikes('+ID+',\'like\')" />')
              likes = likes-1;
            break;
          }
          $('#likes-'+ID).val(likes);
          if(likes>0) {
            $('#tutorial-'+ID+' .label-likes').html(likes+" Like(s)");
          } else {
            $('#tutorial-'+ID+' .label-likes').html('');
          }
        }
      });
    }
})

Answer 2

您可以将对象作为参数传递。像：

在PHP中：

 $arr = array('id'=>$uploadedpics['ID'], 'str'=>$str_like);
 echo "<input" ." type='" ."button'" ." title='" .ucwords($str_like) ."'" ." class='" .$str_like ."'" ." onClick='addLikes(".json_encode($arr).")'/>" ;

然后在javascript：

 function addLikes(obj) {
    var id = obj.id;
    var str = obj.str;
     //rest of your code.
 }

使用动态元素

2 个答案: