麻煩jQuery的生命週期

Question

的index.html：

<input type="text" id="inputs" name="inputs"> 
<input type="button" id="btnAdd" value="submit"> 

的script.js：

(function() { 
    function myFunction(input) { 
     alert(input); 
    } 
    $('#btnAdd').click(myFunction($('#inputs').val())); 
}); 

我有麻煩我的JavaScript被點擊我的按鈕時運行。我假設我濫用了ready函數，或者我的頁面尚未註冊該按鈕，但是當我調試頁面時，我無法在javascript中的任何行中打斷它。有人能告訴我正確的方法來實現這個功能嗎？謝謝。

Answer 1

因爲它的編寫方式，你提供的script.js的代碼將永遠不會運行。你可能想把你的函數放到jQuery的調用中，以便在DOM加載時執行。另外，您需要將您的點擊回叫包裝在匿名函數中，否則當您嘗試添加回調而不是實際點擊時，它會執行myFunction。

$(function() { 
    function myFunction(input) { 
     alert(input); 
    } 
    $('#btnAdd').click(function() { 
     myFunction($('#inputs').val()) 
    }); 
}); 

https://jsfiddle.net/9du8rxw0/

Answer 2

我在猜測，DOM尚未加載，並且您試圖縮短撥打.ready()的電話號碼是錯誤的。嘗試使用$加前綴：

另外，您的事件處理程序安裝程序沒有按照您的要求進行。

// Need $ before your parens (shorthand for .ready()) 
$(function() { 
    function myFunction(eventData) { 
     alert(eventData.inputValue); // <-- get input value from eventData 
    } 

    // This is not proper usage of .click() 
    // https://api.jquery.com/click/ 
    // $('#btnAdd').click(myFunction($('#inputs').val())); 

    // You want to pass the relevant eventData as the first param, 
    // and a reference to your handler in the second. 
    $('#btnAdd').click({ inputValue: $('#inputs').val() }, myFunction); 
}); 

儘管如此，如果你不需要myFunction單獨定義做，你可能會與@Gerasimos的建議，更好。

Answer 3

您需要$在(function()之前，並且您的點擊功能需要花括號。

$(function() { 
 
    function myFunction(input) { 
 
     alert(input); 
 
    } 
 
    $('#btnAdd').click(function(){myFunction($('#inputs').val())}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<input type="text" id="inputs" name="inputs"> 
 
<input type="button" id="btnAdd" value="submit">

Answer 4

需要回調添加到您的點擊事件和$(document).ready(function(){ })短手$(function(){ })。而且最好是寫的文件準備之外自定義函數。

$(function() { 
 
     
 
     $('#btnAdd').click(function() { 
 
      myFunction($('#inputs').val()) 
 
     }); 
 
    }); 
 

 
    function myFunction(data) { 
 
      alert(data); 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="inputs" name="inputs"> 
 
<input type="button" id="btnAdd" value="submit">

Answer 5

增加你的自我調用函數之前$會告訴jQuery來等待整個頁面，包括你的myFunction的定義中加載執行之前。

像

$(function() { 
    function myFunction(input) { 
     alert(input); 
    } 
    $('#btnAdd').click(myFunction($('#inputs').val())); 
}); 

然後確保無論myFunction是在全球範圍內聲明的，或者更好的是，你的自我調用函數內包裝爲好。