为每个滴创建隐藏字段元素

Create hidden field element for each drop

本文关键字：隐藏 字段 元素 创建      更新时间：2023-09-26

我知道这是一个与我上一个类似的问题，但它略有不同。

我有这个脚本将每个"删除"元素添加到列表中。现在我需要将其添加到变量/隐藏字段中，以便我可以通过表单将其传递到下一页。

当我此刻运行它时。但是，它针对每个项目发出警报，它不仅对掉落的每个项目都发出警报，而且如果有 10 个项目掉落，它将为每个丢弃的项目运行 10 次，而不是每个丢弃的项目运行一次。

任何帮助都会很棒。

//Record and add dropped items to list
            var txt = $("#listbox");
            var dtstart = copiedEventObject.start + ''n'
            var caltitle = copiedEventObject.title
            var txt = $('#listbox');     
            txt.append("<li class ='listItem'> "+dtstart +"</li>")
            var listItems = $('.listItem'); 
                $('#calendarform').submit(function() {
                        listItems.each(function(){   //For each event do this:
                            alert( listItems.text() );                  
                        });
                    return false;
                });
            // remove the element from the "Draggable Events" list
            $(this).remove();

问题出在这个代码上

listItems.each(function(){  //For each event do this:
    alert( listItems.text() );                  
});

您正在提醒每个列表项的所有列表项的文本。

使用 jQuery（this） 访问每个块中的当前项

listItems.each(function(){   //For each event do this:
    alert( $(this).text() );                  
});

假设您的代码位于 drop 事件处理程序中，则每次删除时也会添加一个提交处理程序。 这意味着每次丢弃时，都会将另一个提交事件排队。 这可能不是希望的。 将此 submit（function（）{}） 块移到放置处理程序之外，以防止它多次触发该函数。

$('#calendarform').submit(function(e) {
    var listItems = $('.listItem'); 
    listItems.each(function(){   //For each event do this:
        alert( listItems.text() );                  
    });
    e.preventDefault();//stop normal behavior
    return false;
});

要动态创建元素，您只需将 jQuery 传递给 html，并将其append到您的表单中。

$('<input type="hidden" name="listItem[]"/>').appendTo("#calendarForm").val(listItem.text())

您可能需要摆弄 name 元素才能让它以服务器端语言作为数组提交，但您也处于 each 循环中，它为您提供了一个索引，因此您可以执行以下操作。

$('#calendarform').submit(function(e) {
        var form = $(this);
        var listItems = $('.listItem'); 
        listItems.each(function(index){   //For each event do this:
            var listItem = $(this);
            $("<input type='hidden'/>").val(listItem.text()).appendTo(form).attr('name', 'listItem[' + index + ']');
        });
        e.preventDefault();//stop normal behavior
        return false;
    });
相关文章：