javascript - Jquery 函数在错误时间提交

Question

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

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

我试图通过这个 jquery block 来调用它:

$(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)，它将运行该函数。目前，它一打开就运行它，不会等到已解决的按钮关闭。 .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。我尝试过窗口、全局变量和对象，但无法使其工作。

Answer 1

你的处理程序

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

在另一个处理程序内。

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

就编译器而言，第二个处理程序不存在，因为它位于错误的范围内。您需要将该 #addComment 处理程序移至根范围。当然，这需要您重写该函数 - 但这就是它不响应点击的原因。

此外，.click 也不错，但更好的语法是使用 .on，因为它允许您更好地确定处理程序的范围。

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