如何通過onclick =「function（this）」發送

Question

好的，所以我在這裏遇到了兩個問題。首先我會告訴你的HTML。

<div id="servicesAvailable"> 
    <div> 
     <input type="text" name="servicesAvailable[]"> 
     <i class="fa fa-plus-circle"></i>  
     <span>Add another service</span> 
    </div> 
</div> 

好了，所以我希望用戶能夠點擊「.fa加圈」類裏面添加#servicesAvailable另一格。 （我知道人們會說爲什麼不用你寫$（）而不是jQuery（），但它的罰款是這樣的）。

jQuery('fa-plus-circle').click(function(){ 
    jQuery('#servicesAvailable').append(
     '<div> 
      <input type="text" name="servicesAvailable[]" onclick="addServices(this)"> 
      <i class="fa fa-plus-circle"></i> 
      <span> Add another service</span> 
     </div>' 
    ); 
    jQuery(this).next().hide(); 
    jQuery(this).hide(); 

}); 

好的，所以這應該工作得很好。它實際上是我第一次點擊課程。然後，當我點擊新增附加部分上的fa-plus-circle類時，它就不會執行任何操作。即使我把console.log（'這裏'）;裏面的jQuery點擊功能它不記錄。

因此，如果任何人都可以指出我在那裏做錯了那麼偉大的開始！

但是我現在已經試圖改變我這樣做的方法來得到它的工作導致的標題問題，「如何通過的onclick =發送‘功能（該）’」

<div id="servicesAvailable"> 
    <div> 
     <input type="text" name="servicesAvailable[]"> 
     <i class="fa fa-plus-circle" onclick="addServices(this)"></i>  
     <span>Add another service</span> 
    </div> 
</div> 

     function addServices(this) 
     { 
      jQuery('#servicesAvailable').append(
       '<div> 
        <input type="text" name="servicesAvailable[]" onclick="addServices(this)"> 
        <i class="fa fa-plus-circle"></i> 
        <span> Add another service</span> 
       </div>' 
      ); 
      this.next().hide(); 
      this.hide(); 
     } 

現在直走在控制檯前，我做任何事情是有

Uncaught SyntaxError: Unexpected token this 
function addServices(this) 

誰能指教一下我在任何情況下，做錯了要得到這個工作嗎？

我承認我不是100％的第二種方式，但我很確定第一次嘗試應該工作。

Answer 1

由於錯誤是語法錯誤Uncaught SyntaxError: Unexpected token this。

您的字符串未在同一行上完成。對於多行字符串在行

function addServices(el) { 
    jQuery('#servicesAvailable').append(
     '<div>\ 
      <input type="text" name="servicesAvailable[]" onclick="addServices(this)">\ 
      <i class="fa fa-plus-circle"></i>\ 
      <span> Add another service</span>\ 
     </div>' 
    ); 
    jQuery(el).hide().next().hide(); 
} 

Answer 2

事件僅綁定到現有元素，而不是綁定到動態添加的元素。要綁定動態添加元素的活動，你需要更新

jQuery('fa-plus-circle').click(function(){ 

到

jQuery("#servicesAvailable").on("click", "fa-plus-circle", function(){ 

僅供參考 - http://api.jquery.com/on/

Answer 3

的末尾使用\這是你的工作代碼：

$('#servicesAvailable').on("click", ".fa-plus-circle",function() { 
    $('#servicesAvailable').append('<div>\ 
    <input type="text" name="servicesAvailable[]" onclick="addServices(this)">\ 
    <i class="fa fa-plus-circle">click to add</i>\ 
    <span> Add another service</span>\ 
</div>'); 
    jQuery(this).next().hide(); 
    jQuery(this).hide(); 

}); 

Here is the JSFiddle demo