Question

我的html中有四个按钮。

创建机场
创建城市
创建城市短名称
创建机场短名称

所有按钮都会给同一页面调用ajax，下面是为其中一个按钮编写的代码。

 $('#imgbtnCreateAirport').click(function (event) 
    {        
    if($('#hidtext').val()!= 'true')
        {
        var file = $('input[type=file]').val(); 
        if (!file)
        {
            $('#lblCreateKeywordsError').html('Please select the excel file from top.');
            event.preventDefault();
            return;
        } 
       else if (!file.match(/^.*\.xls[xm]?$/)) 
       {
            $('#lblCreateKeywordsError').html('Please select excel file only!');          
            event.preventDefault();
            return;
       }
        else
        {
        $('#lblCreateKeywordsError').empty();
        var strInput = "";
        strInput = strInput + "?cck=CreateAirportKeys";
        var serviceReq = "/TridionCustomPageWeb/Exceldata/excelupload.aspx";
             $.ajax({
                url: serviceReq + strInput,
                contentType: "application/json; charset=utf-8",
                dataType: "jsonp",
                jsonpCallback: "processcck",
                beforeSend: function()
                {     
                    $("#hidtext").val('true');                  
                    $("#imgbtnCreateAirport").attr('src', 'images/processing.gif').attr('alt','Processing...');                      
                },
                success: function(data, textStatus, jqXHR) 
                {    
                    $("#hidtext").val('false');                
                    $("#imgbtnCreateAirport").attr('src', 'images/CreateAirport.jpeg');
                    if (data.result=="CreateAirportKeys")
                    {
                        alert("Valid")
                    }
                    else
                    {
                        alert("Invalid");
                    }                   
                },
                error: function(jqXHR, textStatus, errorThrown) {
                alert(textStatus + "---" + errorThrown);
                }
            });
            return false;
            }
            event.preventDefault();
            return;
            }
            else
            {
                alert("Please wait till other process is completed!!");
                event.preventDefault();
                return;
            }
    });

现在除了两件事之外，所有代码对于每个按钮都是相同的，下面是两件事情会有所不同

strInput = strInput + "?cck=CreateAirportKeys"; //here CreateAirportKeys part will be different in every button call
$("#imgbtnCreateAirport").attr('src', 'images/processing.gif').attr('alt','Processing...');  // here $("#imgbtnCreateAirport") will be different.

我试着制作jquery函数。但由于'event.preventDefault（）;'，我无法制作，因为我无法在功能中获得它。

请建议我如何编写一个具有event.preventDefault（）的函数;以及上述两个领域的参数。

感谢。

Answer 1

您可以创建一个包含您可以从每个事件处理程序调用的所有逻辑的函数，并将其传递给不同的特定部分：

function processButton(event, inputStr, btnCreate) {
    // all your code goes here and it uses the three arguments passed in
}

然后，对于每个事件处理程序，您可以执行此操作：

$('#imgbtnCreateAirport').click(function (event) {
    return(processButton(event, "?cck=CreateAirportKeys", "#imgbtnCreateAirport"));
}

如您所见，每个click事件处理程序都调用公共代码并传递不同的三个部分，即事件对象，字符串和id值。对于DOM对象，如果您希望它始终是被点击的实际对象，您也可以只传递this，或者也可以从event获取该对象。

如何在jquery函数中传递事件

1 个答案: