jquery：不明白為什么元素選擇器工作或不工作

Question

我有一個包含以下元素的 html 文檔

<input type="text" style="width: 40px;" name="rate" id="rate" value="1" />

現在我想使用 jQuery 在更改此文本字段后運行一個函數。 但我似乎不明白選擇器是如何工作的。 因為這個例子有效：

<script>
// works
$(document).on('input', function() {
    alert(); 
});
</script>

但當然它會觸發所有交互的輸入。 所以我只想要一個特定的 id 來響應：

<script>
// doesn't work
$(document).on('#rate', function() {
    alert(); 
});
</script>

但它不起作用。 它既不使用類或屬性（“input[name='rate']”），也不使用 'input#rate' 而不是文檔。

$('input#rate').on(function() {

這是為什么？

包含在 head 中的 jQuery 是：

<script src="/assets/jquery-1.12.3.min.js"></script>

Answer 1

on()接受事件名稱作為第一個參數。

由於沒有名為#rate事件，以下將不起作用。

$(document).on('#rate', function() {

用

$(document).on('keyup', '#rate', function() {
               ^^^^^^^                         : Event name here

Answer 2

on應該采取事件然后selector像.on('keydown', '#rate'

格式如：

.on( events [, selector ] [, data ], handler )

所以它會

$(document).on('click', '#rate', function() {
                ^^^^^
    alert(); 
});

更多關於這里

Answer 3

input在$(document).on('input', function() {不是一個選擇。

document是選擇器，'input'是事件類型。

如果要偵聽特定元素上的input事件，可以將選擇器作為第二個參數傳遞給.on() ：

$(document).on('input', '#rate', function() {
//                      ^^^^^^^
  ...
});

或者您可以在綁定回調之前選擇特定元素：

$('#rate').on('input', function () {
  ...
});

Answer 4

你現在擁有的：

$(document).on('input', function() { } );

方法

在任何元素的每個“輸入”事件上做一些事情

如果您只想對特定元素執行某些操作 - 將此元素作為選擇器傳遞：

$(document).on('input', "#rate", function() { } );

這里input是一個事件， #rate是一個元素選擇器。

Answer 5

使這項工作的正確方法是：

 //on click
          $(document).ready(function(){
             $("#rate").click( function () {
                alert('Awesome');
            })});

用於輸入框

<input type="text" style="width: 40px;" name="rate" id="rate" value="1" />

如果你想定位類：

<input type="text" style="width: 40px;" name="rate"  value="1" class="rate">

腳本將是

//on click
      $(".rate").click( function () {
            alert('Awesome');
        })

欲了解更多信息，請閱讀：- jQuery 選擇器

Answer 6

我發現當我感到困惑時，為什么 jQuery 函數不能按照我期望的方式正常工作，請參閱 jQuery 的 API 文檔以了解用法和示例。 特別是對於.on()我會參考該函數的文檔頁面：
http://api.jquery.com/on/

每個事件都會產生不同的預期結果。 您想在輸入更改時觸發一些代碼。 使用的事件基於普通 JavaScript 事件，因此在這種情況下，您的選項將包括 on change 、 keyup或keydown 。

要決定為此使用哪個事件，對我來說，通常歸結為一件事：我的代碼是否需要在輸入顯示在文本字段之前檢查輸入？

您可以在此代碼中看到如何使用我提到的每個事件。

 // Using on-change // You'll notice that this only 'fires off' when your cursor LEAVES the input field $("#rate1").on("change",function() { $(this).next().html("<= Changed"); }); // Using on-keyup // You'll notice that this only 'fires off' when the key you pressed is released, not when it is pressed $("#rate2").on("keyup",function() { $(this).next().html("<= Changed"); }); // Using on-keydown // You'll notice that this only 'fires off' when a key is pressed $("#rate3").on("keydown",function() { $(this).next().html("<= Changed"); });

 .label { color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <input type="text" style="width: 40px;" class="change" name="rate" id="rate1" value="1" /> <span class="label"></span><br /> <input type="text" style="width: 40px;" class="keyup" name="rate" id="rate2" value="1" /> <span class="label"></span><br /> <input type="text" style="width: 40px;" class="keydown" name="rate" id="rate3" value="1" /> <span class="label"></span><br />

當您嘗試在進入輸入之前查看他們輸入的鍵時，最好使用類似keydown東西。 我通常用它來查看是否按下了回車鍵。

希望這可以幫助！