Question

我目前正在以表格布局的形式生成表单，但是我没有使用表格（Bootstrap问题），而是将div用于布局。

一般概念是2 select boxes，其中一个被禁用。当选择其中一个框时，将触发JSON请求，该请求返回几行数据-最终可能多达500行，因此为什么我尝试动态生成所有这些数据。

然后使用此数据填充Div-Table，并在最右边的列中生成一个编辑按钮。

我的问题是，当用户按下回车键时，无法强制按下保存按钮。到目前为止，我尝试过的所有操作都只需单击找到的第一个按钮（因为它们都具有相同的名称/ ID。

此代码的主要部分如下；

$(document).ready(function() {
    $('select.changeLanguage , select.siteSection').change(function(){
        $("#tbody").empty();
        $.ajax({
                type: 'POST',
                url: 'Select.php',
                data: {LanguageSelectedDropdown: $('select.changeLanguage').val(), siteSection: $('select.siteSection').val() },
                dataType: 'json',
                success: function (data) {
                $('#divid').show();  //Show the hidden div

                $.each(data, function (index, dbvalues) {
                    var eachrow = 
                           '<form id="languageset" class="tr" action="Update.php" method="POST">'
                         + '<div id="test" class="td">'
                         + dbvalues[0]
                         + '</div>'
                         +  '<div class="td2">'
                         + dbvalues[1]
                         + '</div>'                      
                         + '<div class="td2 test action"><button id="button" type="button" class="btn btn-primary btn-sm" onclick="modify(this);">Edit</button></div>'
                $('#tbody').append(eachrow);
                });  // END EACH ROW FUNCTION                        
                     $('#siteSection').prop('disabled', false);  // remove the disabled marker against the siteSection dropdown 
            }  // END SUCCESS   
        });  // END AJAX
    });  // END CHANGE FUNCTION
}); // END DOCUMENT READY

所有这些均按预期工作。代码的最后部分像这样；

function modify(TheTableRow){
    var tr = jQuery(TheTableRow).parent().parent();
    if(!tr.hasClass("selected")) {
        tr.addClass("selected");
        tr.find("div.td2").each(function(){
            if(!jQuery(this).hasClass("action")){
                var value = jQuery(this).text();
                jQuery(this).text("");
                jQuery(this).append('<input id="new_value" type="text" value="'+value+'" />');      
            } else {
                jQuery(this).find("button").text("Save").removeClass('btn-success').addClass('btn-info');
            }
        }); 
    } else {    
        tr.removeClass("selected");
        tr.find("div.td2").each(function(){
            if(!jQuery(this).hasClass("action")){   

                var value = jQuery(this).find("#new_value").val();
                jQuery(this).text(value);
                jQuery(this).find("#new_value").remove();
                var POSTME = JSON.stringify({originalvalue: ($(this).closest('div.td2').prev('#test').text()), newvalue: (value)}); 

                     $(function () {
                          $.ajax({
                            type: 'post',
                            url: 'Update.php',
                            dataType : 'json',
                            data : {SuperSecret: POSTME}
                          });
                      });

            } else {            
                $(this).find("button").text("Saved").removeClass('btn-info').addClass('btn-success');   
            }
        });
    }
}

为清楚起见，这一切都按照我的意愿进行。用户单击“编辑”按钮，编辑该行，然后单击“保存”以触发JSON请求（依次更新数据库）。

我要做的是让用户在输入完毕后单击“返回”，而不是单击“保存”，并在发生这种情况时单击正确的按钮。

需要使用PreventDefault，因为我从不希望用户看到我们要发布到的屏幕，但是为什么这样做不起作用？

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      $(this).closest('div.tr').find('button').click();
    }
  })
});

编辑

在阅读了几次之后，我基本上只是想在点击返回键时按下保存按钮...

HTML

<div class="table">     
    <div class="thead">
        <div class="tr">
            <div class="td">Website Value</div>
            <div class="td2">Translation</div>
            <div class="td1">Edit</div>
        </div>
    </div>
    <div class="tbody" id="tbody">
    </div>
</div>

由于AJAX请求在jsfiddle上有些噩梦，here's the example显示了（已编辑的）生成的源。

按下返回键时，在同一TR中按下按钮

0 个答案: