Question

我创建了一个jQuery代码，用于生成带有html输入值

的AJAX请求

这是jQuery代码：

$(document).on('change keyup', '#quantityNumbeInvoiceItem, #itemDiscountInvoice', function() {
    var quantity  = $(this).parent('td').find('#quantityNumbeInvoiceItem'),
        discount  = $(this).parent('td').find('#itemDiscountInvoice'),
        item_name = $(this).parent('td').parent('tr').find( '#itemNameJsAjax span' ).text(),
        ajaxUrl   =  'requests/Ajax/item_full_amount.php?item_name=' + item_name + '&quantity=' + quantity + '&discount=' + discount,
        itemContainer = $(this).parent('td').parent('tr').find( '#fullAmountForItemJsAjax' );

    $.ajax({
        url: ajaxUrl,
        type: 'GET',
    })
    .done(function(res) {
        itemContainer.html( res );
    })
    .fail(function() {
        console.log("error");
    })
});

这是HTML：

<tbody>
    <tr>
        <td style="width: 94px;">
            <img src="layouts/images/items/368988_2.jpeg" alt="gypsoid" title="gypsoid" style="width:94px;height: 70px;">   
        </td>
        <td id="itemNameJsAjax" style="position: relative;">
            <span>gypsoid</span>
        </td>
        <td>
            <input data-class=".quantityNumbeInvoiceItem" class="quantityNumbeInvoiceItems" id="quantityNumbeInvoiceItem" value="1" min="1" max="2" name="invoiceItemAmount" type="number" />
            <div class="availableQuantityInvoiceItem" style="margin:10px 0;">Available: 2 </div>
        </td>
        <td>
            <input id="itemDiscountInvoice" name="itemDiscountInvoice" value="0$" type="text">
        </td>
        <td id="fullAmountForItemJsAjax">$20</td>
        <td style="border:0;">
            <i id="removeLineSalesInvoices" style="color: #f00;font-weight: 900;border-radius: 50%;border: 1px solid #f00;padding: 3px;cursor: pointer;" class="ti-close"></i>
        </td>
    </tr>
</tbody>

当我更改quantity的值时，discount的值变为undefined，discount的值变为package org.kodejava.example.awt; import java.awt.AWTException; import java.awt.Robot; import java.awt.event.KeyEvent; public class CreatingKeyboardEvent { public static void main(String[] args) { try { Robot robot = new Robot(); // Create a three seconds delay. robot.delay(3000); // Generating key press event for writing the QWERTY letters robot.keyPress(KeyEvent.VK_Q); robot.keyPress(KeyEvent.VK_W); robot.keyPress(KeyEvent.VK_E); robot.keyPress(KeyEvent.VK_R); robot.keyPress(KeyEvent.VK_T); robot.keyPress(KeyEvent.VK_Y); } catch (AWTException e) { e.printStackTrace(); } } }。

如果有人有解决方法，我会感激不尽。

Answer 1

您的代码中有几处错误，例如当您使用#quantityNumbeInvoiceItem作为选择器时，#itemDiscountInvoice不是此元素的父级，或者等等。您也忘记了val()输入元素。所以，现在你可以获得所有变量。

$(document).on('change keyup', '#quantityNumbeInvoiceItem, #itemDiscountInvoice', function() {

  var quantity = $('#quantityNumbeInvoiceItem').val(),
    discount = $('#itemDiscountInvoice').val(),
    item_name = $('#itemNameJsAjax').find('span').text(),
    ajaxUrl = 'requests/Ajax/item_full_amount.php?item_name=' + item_name + '&quantity=' + quantity + '&discount=' + discount,
    itemContainer = $('#fullAmountForItemJsAjax').text();

  console.log('itemContainer: ' + itemContainer);
  console.log('item_name: ' + item_name);
  console.log('discount: ' + discount);
  console.log('quantity: ' + quantity);


  /* $.ajax({
       url: ajaxUrl,
       type: 'GET',
     })
     .done(function(res) {
       itemContainer.html(res);
     })
     .fail(function() {
       console.log("error");
     })*/


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="itemNameJsAjax" style="position: relative;">
      <span>gypsoid</span>
    </td>
  </tr>

  <tr>
    <td><input data-class=".quantityNumbeInvoiceItem" class="quantityNumbeInvoiceItems" id="quantityNumbeInvoiceItem" value="1" min="1" max="2" name="invoiceItemAmount" type="number">
      <div class="availableQuantityInvoiceItem" style="margin:10px 0;">Available: 2 </div>
    </td>
  </tr>

  <tr>
    <td><input id="itemDiscountInvoice" name="itemDiscountInvoice" value="0$" type="text"> </td>
    <td id="fullAmountForItemJsAjax">$20</td>
    <td style="border:0;"><i id="removeLineSalesInvoices" style="color: #f00;font-weight: 900;border-radius: 50%;border: 1px solid #f00;padding: 3px;cursor: pointer;" class="ti-close"></i></td>
  </tr>
</table>

分别获取jQuery的每个输入值

1 个答案: