4

在检查了其他 SO 帖子后,我没有找到我的问题的答案——但显然这种类型的问题发生在其他人身上,而不是我的问题。但是一个 ajax .post 函数被调用了两次,虽然我不明白为什么。

这是 jQuery 1.8.0,使用 Firefox (Iceweasel) 浏览器。

这是我的 jquery 代码,它将函数附加到四个按钮,编辑、保存、新建、取消。还有一个填充选择列表的函数:

  var is_new = 0;

  $(document).ready(function()
  {
    // Attach event handlers to buttons
    $('#editbtn').on('click',pop_studyname);
    $('#newbtn').on('click',new_studyname);
    $('#savebtn').on('click',save_studyname);
    // disable the Save button until we have something to save
    $('#savebtn').attr('disabled',true);
    // disable the Cancel button until we have something to cancel
    $('#cancelbtn').attr('disabled',true);

  });

  function pop_studyname()
  {
    // pop the selected studyname into edit box.
    $('#edit_field').val($('#studylist :selected').text());
    // disable the New Study button
    $('#newbtn').attr('disabled',true);
    // enable the Cancel button
    $('#cancelbtn').attr('disabled',false);
    // and bind it to a function
    $('#cancelbtn').on('click',cancel_studyname);    
    // enable the Save button
    $('#savebtn').attr('disabled',false);
    // and bind it to a function
    $('#savebtn').on('click',save_studyname);
  }

  function new_studyname()
  {
    // clear edit box.
    $('#edit_field').val('');
    /**************************/
    /* set flag for New Study */
    is_new = 1;
    /**************************/

    // Enable the Cancel button
    $('#cancelbtn').attr('disabled',false);
    // and bind it to a function.
    $('#cancelbtn').on('click',cancel_studyname);
    // Disable the Edit button.
    $('#editbtn').attr('disabled',true);
    // Enable the Save button
    $('#savebtn').attr('disabled',false);
    // and bind it to a function.
    $('#savebtn').on('click',save_studyname);
    // put the cursor in the edit box
    $('#edit_field').focus();
  }

  function cancel_studyname()
  {
    // clear edit box.
    $('#edit_field').val('');
    // disable cancel button.
    $('#cancelbtn').attr('disabled',true);
    // disable Save button.
    $('#savebtn').attr('disabled',true);
    // Enable the Edit button.
    $('#editbtn').attr('disabled',false);
    // And the New Study button.
    $('#newbtn').attr('disabled',false);
    // Reset new study trigger variable. 
    is_new = 0;
  }

  function save_studyname()
  {
    // Are we saving a new or existing Study?
    if (is_new == 1) {
        $.post("saveStudyName.php",
        {'type': 'new', 'studyname': $('#edit_field').val()},
            function(resultmsg) {
              alert(resultmsg);
            }
        );
    // reset the trigger flag
    is_new = 0;

    } else {
      // Update an existing Study.
        // Get the record index and edited study name.
        var styndx = $('#studylist option:selected').val();
        var studyname = $('#edit_field').val();

    // Use ajax post call to update database.
        $.post("saveStudyName.php",
      {'type': 'update', 'studyname':studyname, 'styndx':styndx}, 
      function(resultmsg) {
              alert(resultmsg);
      });
    }
    // clear the edit field
    $('#edit_field').val('');
    // disable the Save button
    $('#savebtn').attr('disabled',true);
    // Enable the Edit button.
    $('#editbtn').attr('disabled',false);
    // Enable the New Study button.
    $('#newbtn').attr('disabled',false);
    // Finally, refresh the studyname picklist.
    refresh_studynames();
  }

  function refresh_studynames()
  {
    // repopulate studylist with update from database...
    // - form the query.
    // - send to database, get the result.
    // - use the result to repopulate the Study name select list.
    $.ajax({                                      
      url: 'getStudyNames.php',        //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format
      error: function() {
        alert('Refresh of study names failed.');
      },
      success: function(data) 
      {
    var $studylist = $('#studylist').empty();
    $.each(data, function(i, record) {
       $studylist.append($("<option/>", {
        value: record.studyindex,
        text: record.studyname
        }));
    });
      } 
    });
  }

查看 Web 控制台和调试器,我可以看到两个 POST(用于 saveStudyName.php)和两个 GET(来自 getStudyNames.php)正在发生,彼此相距仅几毫秒。第一个调用是正确的;但第二个不应该发生。由于涉及的逻辑,第二次调用中的参数不正确并且失败。

为了完整起见,这里是 HTML 代码:

<body >
<div id="container">
  <div id="header">
    <h1>Admin Module</h1>
  </div>
  <div id="navigation">
    <ul>
    <li><a href="AdminMenu.php">Admin Menu</a></li>
    <li><a href="../DNAPortal/DNA_Portal_Menu.php">DNA Portal</a></li>
    <li><a href='../DNAPortal/logout.php'>Logout</a></li>>
    </ul>
  </div>
  <div id="content">
    <h2>IBG Study Maintenance</h2>
    <p>
    <form name="StudySelection" action="process_StudyMaint.php" method="POST" onsubmit="return false" >
    <input type=hidden name=studyindex>
    <div id=content-container2>
      <fieldset>
      <LEGEND><b>Select Study &/or action</b></LEGEND>
    <p>
    <P CLASS=select_header>List of Studies<br>
    <SELECT multiple size=15 NAME="studylist" ID="studylist" STYLE="width: 150px">
    <?php
        $i=0;
        while ($i < $numstudies) {
            $styarr = pg_fetch_row($studyresult);
            echo "<option value=$styarr[0]>$styarr[1]\n";
            $i++;           
        }
      ?>
    </select>
    </p>                
      </fieldset>
    </div>
    <div  >

    </div>
    <div class="lower_block">
      Study name:<br>
      <input id="edit_field" type="text" size=30>
      <input type="button" name="editbtn" id="editbtn" value="Edit" sclass="btn">
      <input type="button" name="savebtn" id="savebtn" value="Save" sclass="btn">
      <input type="button" name="newbtn" id="newbtn" value="New Study" sclass="btn">
      <input type="button" name="cancelbtn" id="cancelbtn" value="Cancel" sclass="btn" disabled=TRUE >
    </div>
  </div>
</div>
</form>
</body>

有什么方法可以阻止第二次通话的发生吗?我看不出发生这种情况的任何原因。

非常感谢任何帮助!太摇滚了!

--rixter

4

2 回答 2

3

如果您在保存之前点击编辑或新建,那么它会被调用两次,因为您告诉过它。

加载页面时,您调用:$('#savebtn').on('click',save_studyname);

并且回调函数pop_studyname()new_studyname()关于EditNew按钮包含同一行。

如果您.on()为同一事件执行多个操作,您将收到多个呼叫。你需要确保它只被调用一次。

于 2012-12-21T01:00:01.460 回答
0

请试试这个,它对我有用......

$(this).unbind();
于 2013-04-24T03:35:19.610 回答