Question

我正在为搜索栏编程，该搜索栏的类别旁边有一个下拉菜单。单击搜索按钮后，将调用doSparql（），它会为用户提供建议以自动完成其搜索。我也在使用分页，并有一个上一个和下一个按钮。由于某种原因，上一个和下一个按钮每次都执行两次，因此显示了备用记录。知道为什么吗？

HTML：

                  <span class="input-group-addon" style="color:black" > <button type="button" onclick="doSparql(this.value)">Search</button></span>
                </div>
              </div>
              <div class="col-md-2"></div>
              </div>
            </div>
        </form>

和Javascript：

function doSparql(option){
getData(option);
rowperpage = 1;
startIndex = 0;
dataResult = null;
dataLen = 0;
    $("#but_prev").click(function(){
   window.alert(startIndex);
    if(startIndex>0){
        startIndex = startIndex-rowperpage;
    }

    createTablerow(dataResult);
});

$("#but_next").click(function(){
     window.alert(startIndex);
    if(startIndex+rowperpage<dataLen){
    startIndex = startIndex+rowperpage;
    }
    createTablerow(dataResult);

});

}

createTableRow的代码段

function createTablerow(data){
var table = document.getElementById("emp_table");
dataLen = data.results.bindings.length;
dataResult = data;
document.getElementById("emp_table").style.visibility = "visible";
var limit = 0;

if(selected == 'Author'){
    document.getElementById("div_pagination").style.visibility = "visible";
    document.getElementById("pageNo").style.visibility = "visible";
    var header = table.createTHead();
    var row = header.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(0);
    var cell3 = row.insertCell(0);
    cell1.innerHTML = "Type";
    cell2.innerHTML = "Date";
    cell3.innerHTML = "Register";
    $("#emp_table tr:not(:first)").remove();

    for(var i=startIndex; i<dataLen && limit!=rowperpage; i++){
        if(limit<rowperpage){
                var register = data.results.bindings[i][data.head.vars[0]].value;
            var id = data.results.bindings[i][data.head.vars[1]].value;
            var date = data.results.bindings[i][data.head.vars[2]].value;
            var type = data.results.bindings[i][data.head.vars[3]].value;
            $("#emp_table").append("<tr id='tr_"+i+"'></tr>");
            $("#tr_"+i).append("<td><a href=\""+register+"\">"+id+"</a></td>");
            $("#tr_"+i).append("<td align='left'>"+date+"</td>");
            $("#tr_"+i).append("<td align='left'>"+type+"</td>");
            document.getElementById("pageNo").innerHTML = (startIndex+1)+" of "+dataLen;
            limit = limit+1;
        }

Answer 1

正如Calvin Nunes所说，您提供的代码不足以测试并给出完整答案。尽管听起来好像click事件被触发了两次。

您可以尝试stopPropagation()或preventDefault()方法

//add event as parameter of the handler function
$("#but_next").click(function(event){
  //this
  event.stopPropagation();
  //or this
  event.preventDefault();

  window.alert(startIndex);
  if(startIndex+rowperpage<dataLen){
    startIndex = startIndex+rowperpage;
  }
  createTablerow(dataResult);
});

这只是一个猜测，但是您可以尝试

上一个和下一个按钮触发两次

1 个答案: