仅用jQuery替换javascript onmouseover

我有一个页面，显示动态数量的“订单”，我有一个按钮“查看”和另一个按钮“打印”。为了显示特定的订单号，我使用onmouseover触发的javascript函数和jqueryajax函数来更改按钮文本，创建数据库条目，然后查看或打印另一个页面。问题是订单在onmouseover中被多次查看或打印。如何仅使用jQuery并调用specfic OrderNumber？下面是我现在使用的代码：

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

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

---

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

您可以将id以

vieworder

开头的所有元素作为目标，然后将行id存储为数据属性：

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

---

首先，不要有需要解析的动态id，也不要在html中有事件处理程序：

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

---

如果你想让它在单击时起作用，那么只需将鼠标悬停改为单击即可。此外，fadeIn不处理值。下面是一个具有基本功能的小把戏：

您的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);
        }
      });
    })
  });
}

---

我会试试这个，看看会发生什么。效果很好！谢谢我确实需要重新使用上面的“查看”功能才能使其正常工作。我正在寻找最有效的方法来处理我正在尝试的事情。我是个新手，所以我不确定你的意思是在vieworder函数中有一个点击处理程序是不是很奇怪。您建议如何编写这篇文章，以及如何合理地构建CSS？我愿意接受建议。很难确定你想做什么。您的问题表明您希望触发此onmouseover，并且只希望它发生一次，但是在onmouseover函数中，您为同一元素定义了onclick处理程序。所以，我认为将会发生的是，你的用户将鼠标移到按钮上，第一次什么也不会发生，然后他们点击它，它会做你想做的事情。然后，他们每次点击都会再次点击。它也可能在mouse over上一次又一次地发生，因为您的单击处理程序基本上是一个闭包。@XanderNGCC所以，我想最大的问题是，您希望这种情况在mouse over还是onclick上发生？你真的只想发生一次吗？我将修改上面的答案，以符合我的假设，即您希望这种情况在MouseOver上发生一次。我希望它在单击时发生。但由于某些原因，我无法让它在onclick上点火，只有当我把它和onmouseover一起发送时，onclick才会点火。并且只发生一次。只需在上面的示例中将鼠标悬停更改为单击即可。谢谢！或者我应该重新构造CSS并使用纯jQuery方法？我正在寻找写这篇文章并遵循最佳实践的最佳、最有效的方法。如果您建议删除CSS并用生成CSS的JavaScript替换它，那么不，为什么要让浏览器做更多的事情呢。如果您请求的数据与以前的请求相同，那么以前的结果有什么问题？

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

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

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