具有相同的单击功能和文档准备功能

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

将请求的内容包装在一个函数中，并在文档加载和按钮单击事件中使用它。

 //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 }); 

Answer 2

包装如下外部功能：

 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()}); }); 

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

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请求获取该ID。

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