添加表單後jQuery發佈

我創建了一個評論腳本，當你點擊img上的任何地方時，它會在div內添加一個文本區域以及一些隱藏字段和一個按鈕。添加表單後jQuery發佈

當我按一下按鈕沒有任何反應，這裏是我的代碼

<html> 
<head> 
    <title>Testing Redpen.io</title> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function() { 

     var status = false; 
     var textboxid = 0; 
     var dotid = 0; 
     var currentTB; 
     var currentDOT; 
     var dotSRC = 'dot.png'; 

     $('img[class=stud]').on('click', function(e) { 
      var offset = $(this).offset(); 

      leftE = (e.clientX - offset.left); 
      topE = (e.clientY - offset.top); 

      //alert(e.clientX - offset.left); 
      //alert(e.clientY - offset.top); 
      if(status == false){ 
       dotup(leftE, topE); 
       popup(leftE, topE); 
       status = true; 
      } 
      else{ 
       $('img[class=dot]').remove(); 
       $('div[class=tb]').remove(); 
       status = false; 
      } 
     }); 

     var dotup = function(leftE, topE){ 

      var dot = $('<img src="' + dotSRC + '" width="20px" height="20px" class="dot" />'); 
      dot.css({ 
       'position': 'absolute', 
       'top': (topE - 2), 
       'left': (leftE - 2) 
      }); 

      dot.attr('id', 'tb_' + dotid); 
      currentDOT = 'tb_' + dotid; 

      $('body').append(dot); 

      dotid++; 
     }; 

     var popup = function(leftE, topE){ 

      var textbox = $('<div class="tb"></div>'); 
      textbox.append('<form name="tb" id="Addtb" method="post" action="add_comment.php"><textarea></textarea><input type="button" id="submitTB" name="submitTB" value="Add Comment" /><input type="hidden" name="leftE" value="' + leftE + '" /><input type="hidden" name="topE" value="' + topE + '" /></form>'); 

      textbox.css({ 
       'position': 'absolute', 
       'top': (topE + 5), 
       'left': (leftE + 5) 
      }); 


      textbox.attr('id', 'tb_' + textboxid); 
      currentTB = 'tb_' + textboxid; 

      $('body').append(textbox); 

      textbox.find('textarea').focus(); 

      textboxid++; 

     }; 


     $("#submitTB").on('click', function(event){ 

      console.log('button clicked'); 
      event.preventDefault(); 

      console.log('hmm not preventing the default'); 
      $.post('test_add.php', $("#tb").serialize()); 

      return false; 
     }); 
    }); 
    </script> 
</head> 
<body> 

<img class="stud" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" /> 

</body> 
</html>

來源

2014-09-29 Chris Cloyd

你能否提供[小提琴]（http://jsfiddle.net）讓人們更容易測試？ – mechalynx 2014-09-29 02:18:57

http://jsfiddle.net/sp7uoeeq/ – 2014-09-29 02:25:15

事件處理程序沒有被安裝在鈕釦可言，這就是問題所在。控制檯沒有提供任何錯誤，因此，腳本甚至沒有到達嘗試附加處理程序 - 因此，既不是錯誤也不是事件處理程序。

解決方案是將事件監聽器附件放置在您的popup函數中，其中應該放在第一位。只要複製粘貼

$("#submitTB").on('click', function (event) { 

     ... 

    });

到

var popup = function (leftE, topE) { ... }

聲明，到了最後，它會工作。

這裏是一個fiddle分叉從你的。 （我也推薦使用preventDefault()行，但它與這個問題無關）。

來源

2014-09-29 02:45:08 mechalynx

添加表單後jQuery發佈

回答

相關問題