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() {

为什么？

头部包含的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(); 
});

更多关于Here

Answer 3

<{1}}中的{p> input不是选择器。

$(document).on('input', function() {是选择器，'input' is the event type。

如果您想侦听特定元素上的document事件，可以将选择器作为second parameter to .on()传递：

input

或者您可以在绑定回调之前选择特定元素：

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

Answer 4

你现在拥有什么：

<?php
$order_details = Mage::getModel(‘sales/order’)->loadByIncrementId(Mage::getSingleton(‘checkout/session’)->getLastRealOrderId());
$adwords_saleamt = $order_details->subtotal;
?>

<!-- Google Code for Website Conversions Conversion Page --> <script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1011076746;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "3B7tCPfZj2YQip2P4gM"; var google_conversion_value = $adwords_saleamt; var google_conversion_currency = "USD"; var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript"  
src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""  
src="//www.googleadservices.com/pagead/conversion/1011076746/?value=$adwords_saleamt&amp;currency_code=USD&amp;label=3B7tCPfZj2YQip2P4gM&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

装置

在每个＆＃34;输入＆＃34;任何元素的事件做某事

如果你想只对特定元素做一些事情 - 将这个元素作为选择器传递：

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

此处$(document).on('input', "#rate", function() { } );是一个事件，input是一个元素选择器。

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 Selectors

Answer 6

我发现当我感到困惑时，为什么jQuery函数没有正常工作，我希望参考jQuery的API文档以获取用法和示例。特别是.on()我将参考该功能的文档页面：
http://api.jquery.com/on/

每个事件都会产生不同的预期结果。您希望在输入更改时触发某些代码。使用的事件基于vanilla JavaScript事件，因此在这种情况下，您的选项将包含在function output = DEMO(input) if input > 0 fprintf('Greater than 0') output = 1; elseif input < 0 fprintf('Less then 0') output = -1; else fprintf('Equals 0') output = 0; end end，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 />的内容。我通常使用它来查看是否按下了回车键。

希望这有帮助！

jquery：不明白为什么元素选择器工作或不工作

6 个答案: