Question

我使用一些API调用加载页面。我还需要为点击功能执行相同的任务。我的jQuery函数如下：

$(document).ready(function(){

    var result = $.ajax({
        type: "GET",
        url:  "http://localhost:8080/importantExtensions",
        dataType:"json", //to parse string into JSON object,
        success: function(data){
            if(data){
                var len = data.length;
                var txt = "";
                if(len > 0){
                    for(var i=0; i<len; i++){
                        if(data[i].empName && data[i].extCode){
                            txt += "<tr><td>"+data[i].empName+"</td><td>"+data[i].extCode+"</td></tr>";
                        }
                    }
                    if(txt != ""){
                        $("#impExtTableID tbody").html(txt);
                        //("#impExtTableID").html(txt).removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    }).responseText;
    return false;//suppress natural form submission
});

任何人都可以帮助我为鼠标点击功能提供相同的功能。我必须为导航栏选项卡执行相同的任务。这个要求的原因是我想在页面加载时以及单击导航栏选项卡时加载表格。

Answer 1

将请求的内容包装在一个函数中，并在文档load＆amp; amp;中使用它。按钮点击事件。

＆＃13;

//wrapper function for request
function requestFunction() {
  return $.ajax({
        type: "GET",
        url:  "http://localhost:8080/importantExtensions",
        dataType:"json", //to parse string into JSON object,
        success: function(data){
            if(data){
                var len = data.length;
                var txt = "";
                if(len > 0){
                    for(var i=0; i<len; i++){
                        if(data[i].empName && data[i].extCode){
                            txt += "<tr><td>"+data[i].empName+"</td><td>"+data[i].extCode+"</td></tr>";
                        }
                    }
                    if(txt != ""){
                        $("#impExtTableID tbody").html(txt);
                        //("#impExtTableID").html(txt).removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    }).responseText;
}


$(document).ready(function(){
  //call function on load
  requestFunction();
  
  //call function on button click
  $('#button').click(function(){
     requestFunction();
  }); 
    return false;//suppress natural form submission
});

＆＃13;

Answer 2

包装外部功能，如下所示：

＆＃13;

function init(){
 var result = $.ajax({
        type: "GET",
        url:  "http://localhost:8080/importantExtensions",
        dataType:"json", //to parse string into JSON object,
        success: function(data){
            if(data){
                var len = data.length;
                var txt = "";
                if(len > 0){
                    for(var i=0; i<len; i++){
                        if(data[i].empName && data[i].extCode){
                            txt += "<tr><td>"+data[i].empName+"</td><td>"+data[i].extCode+"</td></tr>";
                        }
                    }
                    if(txt != ""){
                        $("#impExtTableID tbody").html(txt);
                        //("#impExtTableID").html(txt).removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    }).responseText;
    return false;//suppress natural form submission
}


$(document).ready(function(){
  init();
  $('#btn').click(function(){init()});
});

＆＃13;

<button id="btn">Click me</button>

＆＃13;

Answer 3

您可以将此功能调用。然后在就绪和按钮单击中调用它。假设您的按钮ID是buttonSample。

function callableFunction()
{
var result = $.ajax({
        type: "GET",
        url:  "http://localhost:8080/importantExtensions",
        dataType:"json", //to parse string into JSON object,
        success: function(data){
            if(data){
                var len = data.length;
                var txt = "";
                if(len > 0){
                    for(var i=0; i<len; i++){
                        if(data[i].empName && data[i].extCode){
                            txt += "<tr><td>"+data[i].empName+"</td><td>"+data[i].extCode+"</td></tr>";
                        }
                    }
                    if(txt != ""){
                        $("#impExtTableID tbody").html(txt);
                        //("#impExtTableID").html(txt).removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    }).responseText;
    return false;//suppress natural form submission
}

$(document).ready(function(){
    callableFunction();
});

$( "#buttonSample" ).click(function() {
    callableFunction();
});

Answer 4

你的意思是运行相同的ajax帖子但是点击鼠标？

使用选择器：

$(document).on('click','.someClassInYourDom', function() {
  // some code
});

请注意，您也可以使用它：

$(".someClassInYourDom").click(function() {
  // some code
});

但这只适用于在第一页init中加载的选择器。 第一种方法是100％更好，因为它也会在从AJAX获取的新内容上触发。

如果您想在dom中选择ID，可以设置#someIdInTheDom（请注意#而不是.）。但请注意，如果您选择一个ID，如果它被AJAX请求提取，则无法选择。

有关jQuery的其他信息，您最好从头到尾阅读W3Schools中的精彩教程： https://www.w3schools.com/JQuery/

具有相同的点击功能和文档就绪功能

4 个答案: