Question

具有产品列表，然后单击“从愿望清单中删除”按钮，然后将其从所述产品列表中删除，并向后端发送AJAX请求以通过SQL将其删除。 / p>

第一次单击有效，jQuery执行，然后删除产品。第二次单击任何产品的相同类型的按钮，然后加载href而不是执行jQuery，这是为了执行jQuery。

我尝试从锚点onclick =“ return removeFromWishlist（）;”将其作为静态函数调用它“”

还尝试通过jQuery事件而不是button标签本身在锚链接单击上执行jQuery。

jQuery('.button-wishlist').on('click', function (index) {

    event.preventDefault();

    // Calls the AJAX to remove it from the back-end via SQL etc
    // The response is JSON within the following call
    removeProductAjax(this);

    console.log('removing product from the wishlist');

    // Get the cell position of the product to remove from the wishlist
    var position = jQuery(this).parent().parent().parent().data('cell');

    var html = [];
    var cells = 0;

    jQuery('.wishlist_container .col-md-4').each (function () {
        //
        if (jQuery(this).data('cell') == position) {
            cells++;
        }
        else if (jQuery(this).data('cell') !== undefined) {
            html.push(jQuery(this).html());
            cells++;
        }
    });

    var upto = 0;

    jQuery('.product-row').each (function () {
        var self = this;
        // Repopulate all the product lists excluding the one removed
        jQuery(self).children().each (function () {
            jQuery(this).html(html[upto]);
            upto++;
        });
    });

    // Then clear everything from upto and onwards!
    console.log('cells: ' + cells);
    console.log('upto: ' + upto);

    // let's change from array to 'standard' counting
    upto--;

    // Remove the last element!
    jQuery('.product-row').find('[data-cell=' + upto + ']').remove();

    // Check for any empty rows
    jQuery('.product-row').each (function () {
        if (jQuery(this).children().length == 0) {
            jQuery(this).remove();
        }
    });
});

HTML基本上是：

<div class="row product-row">
    <div class="row product-row"><div class="col-md-4" data-cell="0">
        <h1>product 1</h1>
        <a href="./page.php?page=cart&amp;unwish=660986" data-index="660986" class="wishlist-button" onclick="return removeProductFromWishlist(this);">
            <button name="wishlist" class="btn button-wishlist" data-type="remove">Remove from Wishlist</button>
        </a>
    </div>
    <div class="col-md-4" data-cell="1">
        <h1>product 2</h1>
        <a href="./page.php?page=cart&amp;unwish=661086" data-index="661086" class="wishlist-button" onclick="return removeProductFromWishlist(this);">
            <button name="wishlist" class="btn button-wishlist" data-type="remove">Remove from Wishlist</button>
        </a>
    </div>
    <div class="col-md-4" data-cell="2">
        <h1>product 3</h1>
        <a href="./page.php?page=cart&amp;unwish=661067" data-index="661067" class="wishlist-button" onclick="return removeProductFromWishlist(this);">
            <button name="wishlist" class="btn button-wishlist" data-type="remove">Remove from Wishlist</button>
        </a>
    </div>
</div>

我希望无论什么产品，什么顺序，每次单击“从心愿单中删除”按钮时，它都会执行jQuery。因此，您可以取消许多产品的需求，一个接一个地使用AJAX / jQuery。

Answer 1

在您的问题下关注我的所有评论...
我认为这就是您需要的所有代码。

PHP（我使用的是../removeProduct.php?id=）应该使用一些JSON进行响应，例如：

// PHP does here some DB deletions or fails.
// Send back to AJAX the deleted item ID (or null)
// and some (error?) message
echo json_encode(['id' => $id, 'message' => $message]);
exit;
// No more PHP here. We exit.
// jQuery will collect that JSON response as `res`

jQuery(function($) {

  function removeProductAjax(id) {
    $.get("../removeProduct.php?id=" + id, 'json').always(function(res) {
    
      if (res.statusText === 'error') { // General error (path invalid or something...)
        return alert(`Error: Cannot remove product ID: ${id}`); // and exit function
      }
      
      if (!res.id) { // Something happened
        return alert(res.message); // Alert PHP's error message and exit function.
      }
      
      // All OK. Remove item from products
      $(".product-row").find(`[data-id="${res.id}"]`).remove();
    });
  }

  $('.product-row').on('click', '.product-remove', function(ev) {
    ev.preventDefault();
    removeProductAjax($(this).data('id'));
  });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="row product-row">
  <div class="col-md-4" data-id="660986">
    <h3>product 1</h3>
    <button type="button" class="btn product-remove" data-id="660986">Remove from Wishlist</button>
  </div>
  <div class="col-md-4" data-id="661086">
    <h3>product 2</h3>
    <button type="button" class="btn product-remove" data-id="661086">Remove from Wishlist</button>
  </div>
  <div class="col-md-4" data-id="661067">
    <h3>product 3</h3>
    <button type="button" class="btn product-remove" data-id="661067">Remove from Wishlist</button>
  </div>
</div>

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

再次执行href

1 个答案: