Question

我有一个页面显示动态数量的“订单”，我有一个“查看”按钮和另一个“打印”按钮。要显示特定的OrderNumber我正在使用由onmouseover和jQuery ajax函数触发的javascript函数来更改按钮文本，创建数据库条目，然后查看或打印另一个页面。问题是订单从onmouseover查看或打印MULTIPLE次。如何只使用jQuery并调用specfic OrderNumber？这是我现在使用的代码：

每个订单都会重复此代码：

<div class="console_orders_details">
<input type="button" value="View" 
id="vieworder'.$row[orderid].'" onmouseover="vieworder('.$row[orderid].');">
</div>

以下是查看订单的功能：

function vieworder(id){
            $(function(){
                $('#vieworder' + id).click(function(){
                    var orderid = id;
                    var dataString = 'orderid='+ orderid; //string passed to url
                    $.ajax
                    ({
                        url: "includes/ajax/console-view.php", //url of php script
                        dataType: 'html', //json is return type from php script
                        data: dataString, //dataString is the string passed to the url
                        success: function(result) 
                        {
                            window.open("print.php?view=1&orderid="+id+"");

                            $('#vieworder' + orderid + ':input[type="button"]').attr("value", "Viewed!").fadeIn(400);

                         }
                    });
                })
            });
        }

我假设我需要消除“vieworder”函数并使用纯jQuery函数。但是，我不知道如何发送订单“id”，这就是我使用javascript的原因。

Answer 1

您可以使用以vieworder开头的ID定位所有元素，然后将行ID存储为数据属性：

<div class="console_orders_details">
    <input type="button" value="View" id="vieworder'.$row[orderid].'" data-id="'.$row[orderid].'">
</div>

JS

 $(function(){
    $('[id^="vieworder"]').on('click', function(){
        var orderid = $(this).data('id'),
            btn     = $('input[type="button"]', this);
        $.ajax({
            url: "includes/ajax/console-view.php",
            dataType: 'html',
            data: {orderid : orderid}
        }).done(function(result) {
            window.open("print.php?view=1&orderid="+orderid+"");
            btn.val("Viewed!").fadeIn(400);
        });
    });
});

Answer 2

首先，没有必须解析的动态ID，并且html中没有事件处理程序：

<div class="console_orders_details">
   <input type="button" value="View" class="vieworder" data-id="$row[orderid]">
</div>

接下来，为您想要做的事情创建一个事件处理程序。 .one（）会将事件处理程序设置为仅触发一次：

$(document).ready(function (){
    $(".console_orders_details").one("mouseover", ".vieworder" function(){
        var dataString = "orderid=" + $(this).data("id"); 
        $.ajax({
            url: "includes/ajax/console-view.php", //url of php script
            dataType: 'html', //json is return type from php script
            data: dataString, //dataString is the string passed to the url
            success: function(result) {
                window.open("print.php?view=1&" + dataString);
                $(this).val("Viewed!"); 
             }
        });
    });
});

如果您希望在onclick上工作，则只需将鼠标悬停更改为单击即可。此外，fadeIn不适用于值。这是一个基础知识的小提琴：http://jsfiddle.net/iGanja/EnK2M/1/

Answer 3

你的onmouseover事件可能被多次触发，导致你的问题。这可能有助于阻止不必要的额外呼叫，除非前一个已经完成，否则忽略它们。

var activeRequests = {}; // global

function vieworder(id){
  if (activeRequests[id]) { return; }
  activeRequests[id] = true;
  $(function(){
    $('#vieworder' + id).click(function(){
      var orderid = id;
      var dataString = 'orderid='+ orderid; //string passed to url
      $.ajax
      ({
        url: "includes/ajax/console-view.php", //url of php script
        dataType: 'html', //json is return type from php script
        data: dataString, //dataString is the string passed to the url
        success: function(result) {
          delete activeRequests[id];
          window.open("print.php?view=1&orderid="+id+"");
          $('#vieworder' + orderid + ':input[type="button"]').attr("value", "Viewed!").fadeIn(400);
        }
      });
    })
  });
}

仅使用jQuery替换javascript onmouseover

3 个答案: