0

我有一个显示动态“订单”数量的页面，我有一个“查看”按钮和另一个“打印”按钮。为了显示特定的 OrderNumber，我使用了一个由 onmouseover 触发的 javascript 函数和一个 jQuery ajax 函数来更改按钮文本、创建数据库条目，然后查看或打印另一个页面。问题是从鼠标悬停多次查看或打印订单。如何只使用 jQuery 并调用特定的 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 的原因。

4

3 回答 3

1

您可以定位 ID 以 开头的所有元素vieworder，然后将行 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);
        });
    });
});
于 2013-04-10T01:27:32.433 回答
0

首先，没有必须解析的动态 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!"); 
             }
        });
    });
});

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

于 2013-04-10T01:27:39.417 回答
0

您的 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);
        }
      });
    })
  });
}
于 2013-04-10T01:31:27.317 回答