Jquery関数が間違った時刻にサブミットする

Question

私の問題は、特定のイベントで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クラスをクリックしてモーダルを開くと、それが実行されるということです私が欲しいものではない機能です。 ResolvedのIDを持つモーダル内の解決済みのボタンをクリックすると、その関数が実行されるように、私はそれを取得しようとしています。現在のところ、開かれるとすぐに実行されており、解決されたボタンが閉じられるまで待機しません。 .click()は正しいトリガではありませんか？私はコードを単純化し、より正確にするために関数の実装に取り​​組んでいる理由として、冗長であり、おそらく貧弱な構成のこのコードを最適化しようとしていますが、現在この関数は問題があり、わかりませんなぜ。

モーダルのボディは、jqueryコードの2番目のビットで最初の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

ソリューションそれは第二の方法ですが、その理由は何でも誰かがなぜ私がそれを愛しているのだろうとコメントできるなら、あなたはそれを最上の方法で行わなければなりません！

@ゲッターとセッターの提案は、どこでもtid変数にアクセスできるように助け、この作業を完全に手助けしました。

Answer 2

あなたのハンドラ

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

は別のハンドラ内です。

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

第2のハンドラは、間違った範囲にあるためコンパイラに関する限り存在しません。 #addCommentハンドラをルートスコープに移動する必要があります。もちろん、これはあなたが関数を書き直す必要があります - しかし、それはなぜクリックに反応していないのですか？

はまた、.clickは結構ですが、それはあなたが少し良くあなたのハンドラのスコープにできますので、より良い構文は.on使用しています。

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

なぜあなたができる」わからない、私はついに見つけ

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