非常奇怪的JS/jQuery行为-alert()包含/排除

Question

我有下表。在这个表中，我动态添加了以下形式的行：

<tr class="conditionalRow">
  <td class="logicalData">
    <select oldvalue="AND" class="logicSelectionMenu">          
      <option value="AND">AND</option>
      <option value="AND (">AND (</option>
      <option value="OR">OR </option>
      <option value="OR (">OR (</option>
      <option value=")">)</option>
    </select>
  </td>
  <td class="fieldData">
    <p>Other Data that you don't need to worry about</p>  
  </td>
  <td class="conditionData">
    <p>Other Data that you don't need to worry about</p>  
  </td>
  <td class="compareData">
    <p>Other Data that you don't need to worry about</p>  
  </td>
  <td>
   <button class="removeConditionButton" type="button"> - </button>
  </td>
</tr>

我使用以下jQuery选择器来处理onchange事件：

$(document).ready(function() {
  $(".logicSelectionMenu").change(function() {
    var row = $(this).closest("tr");
    updateLogicMenu(row);
  });
  $(".logicSelectionMenu").focus(function() {
    $(this).attr("oldValue",$(this).val());
  });
});
function updateLogicMenu(inRow) {
  var selectedVal = $(inRow).find(".logicSelectionMenu").attr("value");
  var oldVal = $(inRow).find(".logicSelectionMenu").attr("oldValue");
/* -=>  VERY IMPORTANT LINE BELOW!!!  <=- */
//  alert("Hi, I cause a time delay");
  if (selectedVal == ")") {
  // clears cell contents if ")" is choosen by user
    $(inRow).find(".fieldSelectionMenu"    ).css("visibility","hidden").html("");
    $(inRow).find(".conditionSelectionMenu").css("visibility","hidden").html("");    
    $(inRow).find(".compareData"           ).css("visibility","hidden").html("");
  }
  else if(oldVal == ")" || oldVal === undefined) {
  // regenerates cell contents when user changes selection from ")" to another
    alert("regenerating");
    $(inRow).find(".fieldSelectionMenu").css("visibility","visible").html(getFieldSelectionOptions());
    $(inRow).find(".conditionSelectionMenu").css("visibility","visible");    
    $(inRow).find(".compareSelectionMenu").css("visibility","visible");
    updateFieldMenu(inRow); // function regenerates the next cell contents
                            // and calls another function 
                            // which regenerates the next cell contents, 
                            // and chains on and on ... etc
  }
  else { ; } // no action is needed,no clearing or regeneration
}

问题是，当我从下拉菜单中选择"）"选项，然后选择另一个选项时。页面现在的行为与预期一致。

• 当非常重要的一行不是被注释掉时，两个警告框都会弹出，分别显示"我导致时间延迟"one_answers"再生"，随后细胞的内容物会按预期再生。

• 当非常重要的一行IS被注释掉时，JavaScript不会进入else子句，并且不会重新生成以下单元格的内容。

是什么原因导致此警报框导致页面按预期运行，但它的缺失会导致页面意外运行？是用户单击"确定"按钮的时间延迟吗？我不希望在生产页面上出现此警报框，那么我如何使页面在有或没有警报框的情况下表现相同？

Answer 1

var selectedVal = $(inRow).find(".logicSelectionMenu").attr("value");

.logicSelectionMenu没有属性value。

改为使用.val()：

var selectedVal = $(inRow).find(".logicSelectionMenu").val();

此外，附带说明的是，您有一个名为oldvalue的属性，从而使HTML无效，您应该使用data-*属性，并将其设置为：data-oldvalue="oldvalue"。

按照您现在的操作方式，当您设置oldvalue="val"-时，您正在访问attr("oldValue")。注意这种情况。

oldVal从来都不是undefined，因为您已经在标记中设置了它，所以if语句的||部分是多余的。

Answer 2

感谢ahren的观察，我找到了代码的修复程序。

ahren的 观察结果：

"焦点事件在选择更改后再次触发，因此oldVal被更新。具有alert（）将删除此焦点并防止其再次触发"

修复：

$(document).ready(function() {
  $(".logicSelectionMenu").change(function() {
    var row = $(this).closest("tr");
    updateLogicMenu(row);
  });
/* DON'T USE onfocus event
   to set the oldValue
  $(".logicSelectionMenu").focus(function() {
    $(this).attr("oldValue",$(this).val());
  });
*/
});
function updateLogicMenu(inRow) {
  var selectedVal = $(inRow).find(".logicSelectionMenu").attr("value");
  var oldVal = $(inRow).find(".logicSelectionMenu").attr("data-oldValue");
/* -=>  VERY IMPORTANT LINE BELOW!!!  <=- */
//  alert("Hi, I cause a time delay");
  if (selectedVal == ")") {
  // clears cell contents if ")" is choosen by user
    $(inRow).find(".fieldSelectionMenu"    ).css("visibility","hidden").html("");
    $(inRow).find(".conditionSelectionMenu").css("visibility","hidden").html("");    
    $(inRow).find(".compareData"           ).css("visibility","hidden").html("");
  }
  else if(oldVal == ")" || oldVal === undefined) {
  // regenerates cell contents when user changes selection from ")" to another
    alert("regenerating");
    $(inRow).find(".fieldSelectionMenu"    ).css("visibility","visible").html(getFieldSelectionOptions());
    $(inRow).find(".conditionSelectionMenu").css("visibility","visible");    
    $(inRow).find(".compareSelectionMenu"  ).css("visibility","visible");
    updateFieldMenu(inRow); // function regenerates the next cell contents
                            // and calls another function 
                            // which regenerates the next cell contents, 
                            // and chains on and on ... etc
  }
  else { ; } // no action is needed,no clearing or regeneration
  /* SET THE VALUE HERE: */
  $(inRow).find(".logicSelectionMenu").attr("data-oldValue",selectedVal);
}

在函数末尾设置oldValue的值，并让oldVal === undefined捕获通过函数的第一次传递。