日期:2014-05-16  浏览次数:20284 次

JS控制DIV显示后隐藏问题(具体内详)
我在界面上有一个DIV来装数据,先影藏起来,当一个文本框获(Text)取焦点的时候在DIV里面动态添加一个Table,每个TR有一个onclick="RowClick(this)" 事件,onclick事件是用来获取点击行的数据然后赋给文本框(Text),文本框还有个事件是onblur,当文本框获取值之后隐藏DIV,这时先执行的是文本框的onblur事件,而没有执行TR上面的onclick事件。我需要点击table时执行的是TR上的onclick事件,各位大神,怎么实现呢?
<script type="text/javascript">

  // 创建一个去掉前后空格的公共方法
  String.prototype.trim = function () {
  return this.replace(/^\s+|\s+$/g, "");
  };

  $(function () {

  $("#txtFromCity").keyup(function () {
  document.getElementById("selectFromCity").innerHTML = "";
  $("#selectFromCity").attr("style", "display:block;");
  var CityAbbreviated = $("#hideCityAbbreviated").val().trim();
  var txtFromCity = $("#txtFromCity").val().trim();
  var reg = /[^a-zA-Z\u4e00-\u9fa5]+/gi;
  var reg1 = /[a-zA-Z]+/gi;
  if (reg.test(txtFromCity) == true) {
  document.getElementById("lblFromCity").innerHTML = "请输入正确的城市名称!";
  return;
  }
  else {
  $("#selectFromCity").append('<table id="tbFromCity" style="background-color:#60C3EC">');
  if (reg1.test(txtFromCity) == true) {
  var str = CityAbbreviated.split(',');
  for (var i = 0; i < str.length; i++) {
  if (txtFromCity.length == "1") {
  if (txtFromCity.toUpperCase() == str[i].substring(0, 1) || txtFromCity.toUpperCase() == str[i].substring(str[i].length - 3, str[i].length - 2)) {
  $("#selectFromCity").append('<tr onclick="RowClick(this)" class="tr"><td>' + str[i] + '</td></tr>');
  }
  }
  }
  });


  });

  // TR的行点击事件
  var currentRow = null; 
  function RowClick(row) {
  if (currentRow != null) {
  currentRow.style.removeAttribute("backgroundColor");
  }
  currentRow = row;
  currentRow.style.backgroundColor = "#60C3EC";
  var fromCity = currentRow.cells[0].innerHTML;
  var str = fromCity.trim().split('-');
  $("#txtFromCity").val(str[1]);
  $("#selectFromCity").attr("style", "display:none;");
  }


  function HideDiv() {
  $("#selectFromCity").attr("style", "display:none;");
  }
</script>



 <table>  
  <tr>
  <td>
  出发城市:
  </td>
  <td>
  <input id="txtFromCity" onblur="HideDiv()" /><label id="lblFromCity"></label>
  <div id="selectFromCity">
  </div>
  </td>
</table>

------解决方案--------------------
探讨
引用:

先检查下onclick事件是否绑定上了,如果绑定上了,再设置一个开关变量 var a = false 当a=false时不执行onblur事件,当你执行完onclick后,让a= true 然后让 文本框.onfocus 后再 文本框.onblur