0

我在 html 中有一个手风琴，标题 onclick 调用函数 initTable。

<script type="text/javascript">
  $(document).ready(function() 
  {
    $('.accordion ul li h1').click(function() 
    {                
      document.getElementById('processing').innerHTML = "Processing...";
      document.body.style.cursor = 'Wait';
      $(this).parent().parent().find('.ac:visible').slideToggle().parent().removeClass('active');

      if ($(this).next().is(':hidden'))
      {
        $(this).next().slideToggle().parent().addClass('active'); 
      }
    });
  } );
  </script>
</head>
<body>
  <div id=processing></div>
  <div class="wrapper">
    <div class="accordion">
      <ul>
        <li>
          <h1 onclick=initTable("Anticoag")>Anticoag</h1>
          <div class="ac">
            <div id="AnticoagTable" width="100%">Loading...</div>
          </div>
        </li>

initTable 访问服务器获取数据并创建一个 DataTable，这需要几秒钟。

我要做的是在 initTable 调用发生之前将我的 div id='processing' 设置为“Processing...”。

现在发生的事情是它正在等待表数据返回，然后显示“正在处理...”

我尝试使用此代码将我的 h1 更改为 onclick=test1(category)。但由于某种原因，我的 initTable 函数甚至没有被调用。不知道是语法还是我完全错误地使用它。

function test1(category)
{
  test2(category, function()
  {
    initTable(category);
  });
}

function test2(category)
{
  alert("test2");
  document.getElementById('processing').innerHTML = "Processing...";
  document.body.style.cursor = 'Wait';
}

通过请求添加 initTable 函数 function initTable(category) { if (gsCategory === "") gsCategory = category; else if (gsCategory == category) gbToggle = !gbToggle; 否则 gbToggle = false;

    gsCategory = category;

    if (gbToggle === false) {
        gsCategory = category;

        var select = document.forms[0].selFacility;
        var facility = select.options[select.selectedIndex].value;

        var patJson = getJson(facility, category);
        document.getElementById('processing').innerHTML = "Done...";
        document.body.style.cursor = 'Default';
        var anOpen = [];
        var sImageUrl = "../images/";
        makeTable(category);

        var oTable = $('#' + category).dataTable({
            "bProcessing": false,
                "bDestroy": true,
                "aaData": patJson,
                "bAutoWidth": false,
                "aoColumns": [{
                "mDataProp": null,
                    "sClass": "control center",
                    "sDefaultContent": '<img src="' + sImageUrl + 'details_open.png' + '">',
                    "sWidth": "5%"
            }, {
                "mDataProp": "S_PAT_NAME",
                    "sWidth": "30%"
            }, {
                "mDataProp": "S_AGE",
                    "sWidth": "15%"
            }, {
                "mDataProp": "S_FIN",
                    "sWidth": "30%"
            }, {
                "mDataProp": "S_ROOM_BED",
                    "sWidth": "20%"
            }]
        });

        $('#' + category + ' td.control').live('click', function () {
            var nTr = this.parentNode;
            var i = $.inArray(nTr, anOpen);

            if (i === -1) {
                $('img', this).attr('src', sImageUrl + "details_close.png");
                var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
                $('div.innerDetails', nDetailsRow).slideDown();
                anOpen.push(nTr);
            } else {
                $('img', this).attr('src', sImageUrl + "details_open.png");
                $('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
                    oTable.fnClose(nTr);
                    anOpen.splice(i, 1);
                });
            }
        });
    } //gbToggle = false
}
4

2 回答 2

1

你已经分配了一个函数来点击 jQuery，你不需要也不应该使用onclick属性

只需将 initTable 调用放在点击处理函数中即可。要识别点击了什么，您可以使用data-something属性

$(document).ready(function()  {
  $('.accordion ul li h1').click(function()  {  
  var category = $(this).attr('data-category');

  $('#processing')..text("Processing...");
  ...
  initTable( category );



<h1 data-category="Anticoag">Anticoag</h1>

您还需要：

  • 知道在 javascript{中插入新行是不正确的

  • 了解当您将内联函数传递给其他函数时会发生什么，因为您做到了

    test2(category, function() { initTable(category); });

而且您甚至没有在test2函数定义中声明第二个参数。

于 2013-02-10T19:47:21.457 回答
0

你initTable(category)的永远不会被调用。

test2应该 ：

 function test2(category,cb){
  alert("test2");
  document.getElementById('processing').innerHTML = "Processing...";
  document.body.style.cursor = 'Wait';
  //Calling the call-back
  cb(category);
 }

那是你的实际代码。但你可以简单地在你的test1

function test1(category)
{
  test2(category);

  //asynchronous call to initTable().
  setTimeout(function(){
      initTable(category);
  },0);
}
于 2013-02-10T19:41:57.180 回答