Jquery函数在错误的时间提交

Jquery Functions submitting at wrong times

本文关键字:时间 提交 错误 函数 Jquery      更新时间:2023-09-26

我目前的问题是,我试图在特定事件中使用jquery调用函数,但它在错误的事件中运行。我想调用的函数是:

function resolvedAjax(tid){
    $.ajax({type: 'post',url: 'resolveTicket.php',data: 'tid=' +tid, success: function(s){
        $('#resolvedTicket').html("Resolved");
        mainTable();
    }});
}

我试着通过jquery的这个块来称呼它:

$(document).on('click', '.viewTD', function(){
   var tid = $(this).closest('tr').find('.tidTD input').val();
   $.ajax({
       type: 'post',
        url: 'modalInfo.php',
       data: 'tid=' +tid,
       success: function(d){
           $('.modal-body').html(d);
           $('.modal-title').html("Ticket ID: " + tid);
           $('#myModal').modal('show');
           var time = $('#time').val();
           var desc = $('#description').val();
           $("#addComment").click(function(){
           $.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){
             $.ajax({
                type: 'post',
                url: 'modalInfo.php',
                data: 'tid=' +tid,
                success: function(d){
                    $('.modal-body').html(d);
                    $('.modal-title').html("Ticket ID: " + tid);
                    $('#myModal').modal('show');
                }});
           }});
           });
       }
   });
   $('#Resolved').click(resolvedAjax(tid));
});

问题是,当我通过单击viewTD类打开模态时,它运行的函数不是我想要的。我正在尝试获取它,以便如果您单击ID为Resolved的模态中的resolved按钮,它将运行该函数。目前,它一打开就运行,不会等到解析按钮关闭。.click()不是正确的触发器吗?我正在尝试优化这段冗余的代码,它可能构造得很差,这就是为什么我正在研究函数实现,以简化代码并使其更加正确,但目前这个函数存在问题,我不知道为什么。

(附加信息,以备不时之需)模态的主体是由jquery代码的第二位中的第一个ajax调用构建的。模态内部是一个包含票证信息的表,以及一个用于添加注释和解析按钮的表单。我有所有这些多余的嵌套代码,因为这是我添加注释的唯一方法,它解决了一些问题(尽管它已经创建了一些问题)。我想如果我能让其中的一些功能发挥作用,我就能让它全部发挥作用,但现在我遇到了打开模态并立即解决票证的问题,而不是允许我正确地查看和添加注释。

我知道这可能很简单,但我仍在努力学习使用jquery,因为我过去很少使用它,很抱歉,如果有任何困惑,如果需要,我可以尝试澄清任何事情。

感谢

编辑我现在有这个代码,但它仍然不起作用:

$(document).on('click', '.viewTD', function(){
       window.tid = $(this).closest('tr').find('.tidTD input').val();
       $.ajax({
           type: 'post',
            url: 'modalInfo.php',
           data: 'tid=' +tid,
           success: function(d){
               $('.modal-body').html(d);
               $('.modal-title').html("Ticket ID: " + tid);
               $('#myModal').modal('show');
               var time = $('#time').val();
               var desc = $('#description').val();
           }
       });
    });
    $( document ).on( "click", "#addComment", function() {
        $.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){
        }});
    });
    $( document ).on( "click", "#Resolved",  resolvedAjax(window.tid));

我似乎无法在viewTD点击事件的范围之外访问tid。我尝试过窗口、全局变量和对象,但都无法正常工作。

您的处理程序

 $("#addComment").click(function()

在另一个处理程序中。

$(document).on('click', '.viewTD', function(){

就编译器而言,第二个处理程序不存在,因为它在错误的范围内。您需要将#addComment处理程序移动到根作用域中。当然,这需要重写函数,但这就是为什么它没有响应点击的原因。

另外,.click也可以,但更好的语法是使用.on,因为它可以更好地确定处理程序的范围。

  $( document ).on( "click", "#addComment", function() {
      console.log( "foo!");
    });

我最终找到的解决方案:

$(document).on('click', '.viewTD', function(){
       var tid = $(this).closest('tr').find('.tidTD input').val();
       modalConent(tid);
       tabID.tableID = tid;
    });
    $( document ).on( "click", "#addComment", function() {
        $.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){
            modalConent(tabID.tableID);
        }});
    });
    $( document ).on( "click", "#Resolved", function(){
        resolvedAjax(tabID.tableID);
    });

我为修复它所做的更改是:

$( document ).on( "click", "#Resolved", function(){
    resolvedAjax(tabID.tableID);
});

而不是

$( document ).on( "click", '#Resolved', resolvedAjax(tabID.tableID));

不知道为什么你不能用第二种方式,但无论是什么原因,你都必须用第一种方式,如果有人能评论为什么我肯定会喜欢的!

@Korgrue对getter和setter的建议有助于使tid变量在任何地方都可以访问,并有助于完全实现这一点。