Question

我目前正面临jQuery sortable的奇怪行为。我想知道你们中是否有人有同样的问题。我需要的功能：

我有两个商品清单 - sale_available_products和sale_selected_products

其中一个是满的，另一个是空的。将一个元素从完整元素拖到空白时，必须出现一个模态对话框，要求您输入价格，然后输入可用性。这两个应作为数据标签存储在项目上

到目前为止，所有逻辑都能正常工作，但由于某些奇怪的原因，数据属性不会被保存。 javascript正确地使用附加的html更新 li 元素，但未正确添加数据标记。

设定：

$('#sale_available_products').sortable({
    connectWith: '#sale_selected_products',
    dropOnEmpty: true
}).disableSelection();

$('#sale_selected_products').sortable({
    connectWith: '#sale_available_products',
    dropOnEmpty: true
}).disableSelection();

活动：

 $('#sale_available_products').on('sortreceive', function (event, ui) {
    ui.item.find('.badge').remove();
    ui.item.data('quantity', '');
    ui.item.data('price', '');
});

$('#sale_selected_products').on('sortreceive', function (event, ui) {

    bootbox.prompt("How many " + ui.item.data('name') + " do you want to make available? (0 = infinite)", function (result) {
        if (result != null) {
            ui.item.find('.dd-handle').append('  <span class="badge bg-color-blue txt-color-white">' + result + ' items</span>');
            $(ui.item).data('quantity', result);
        }
    });
    bootbox.prompt("Please type in a price for the item (in " + currency + ")", function (result) {
        if (result != null) {
            ui.item.find('.dd-handle').append('  <span class="badge bg-color-green txt-color-white">' + result + ' ' + currency + '</span>');
            $(ui.item).data('price', result);
        }
    });
});

一切都正常启动。对话框显示，脚本将值正确附加到html ，但不会附加到数据 - 属性。知道为什么吗？

注意，我也试过ui.item.data('quantity', result)并且它也是同样的问题 - 没有JS错误，只是没有保存。

我感谢任何答案

Answer 1

您使用的jQuery .data() function NOT 在HTML节点上存储数据。 jQuery对象保留一个内部缓存，存储所有数据。以这种方式存储的数据可以通过相同的函数检索：

$(element).data("some-data", 1);
var someData = $(element).data("some-data"); // <- someData will now equal 1

如果要将数据存储在HTML节点上，即。显示为<div data-some-data="1">的数据，您可以使用the .attr() function：

$(element).attr("data-some-data", 1);
// now `data-some-data="1"` is present on the HTML element in the DOM

存储和检索数据的两种方法可以以大致相同的方式使用（或者甚至同时使用，但不建议这样做，因为它不必要地复杂）。您的代码将完全按预期工作;数据只是内部存储，因此不会在DOM HTMLElement上显示;因此您还需要使用.data()检索它。

另请注意：当您使用.data检索元素的数据项时，首先查询内部缓存;如果没有找到任何内容，则还会检查HTML元素的data-属性。因此，当您拥有<div data-some-data="1">时，可以使用.data("some-data")检索data-属性，而无需通过之前的.data()调用明确设置该属性。

Answer 2

活动：而不是$(ui.item).data('quantity', result)使用此$(result).data('quantity')

 $('#sale_available_products').on('sortreceive', function (event, ui) {
    ui.item.find('.badge').remove();
    ui.item.data('quantity', '');
    ui.item.data('price', '');
});

$('#sale_selected_products').on('sortreceive', function (event, ui) {

    bootbox.prompt("How many " + ui.item.data('name') + " do you want to make available? (0 = infinite)", function (result) {
        if (result != null) {
            ui.item.find('.dd-handle').append('  <span class="badge bg-color-blue txt-color-white">' + result + ' items</span>');
        }
        return $(result).data('quantity');
    });
    bootbox.prompt("Please type in a price for the item (in " + currency + ")", function (result) {
        if (result != null) {
            ui.item.find('.dd-handle').append('  <span class="badge bg-color-green txt-color-white">' + result + ' ' + currency + '</span>');
        }
       return $(result).data('price');
    });
});

jQuery可排序，数据属性无法在sortretreive上工作

2 个答案: