【问题标题】:Unexpected error using an indexed element id使用索引元素 id 的意外错误
【发布时间】:2013-07-24 12:48:06
【问题描述】:

我是 javascript 和 jquery 的新手,在编写脚本时偶然发现了一个问题。

我的脚本是由 php 代码生成的,该代码从文件中读取行,对其进行解析并使用数组将它们打印出来。然后,Node.js 验证表单输入,并向用户输出有用的消息。

我已经在$('#id').blur 上成功地在各种元素上使用了js 和jquery。但是,当我尝试在我的索引元素上执行此操作时,我遇到了这个问题。

代码:

$('#NS_IN[0]').blur(function() {
        alert("Called");
        CopyNStoMain();     
    });

我注意到这个函数永远不会被执行。我尝试查看控制台中的变量。

typeof($('#NS_IN[0]')) 是一个对象;但typeof($('#NS_IN[0]').val()) 未定义。

在我的 html 代码中,我有:

<input type="text" id="NS_IN[0]" value="" name="NS[0]">

我做错了什么?如果定义了id NS_IN[0] 并且$(NS_IN[0]) 引用了一个对象,那么$(NS_IN[0]).val() 不应该存在并持有输入框的值吗?

【问题讨论】:

  • jQuery 选择器以不同的方式看到[]。也许如果你尝试这种方式:$("#NS_IN[" + "0" + "]").
  • 我猜选择器应该看起来像 $("#NS_IN[0]").val()
  • 似乎[ 是罪魁祸首,参见小提琴:jsfiddle.net/rePQm
  • typeof ( $("#NS_IN[0]").val() ) 也未定义。
  • @Droidzone: 是的,因为 [] 被 jquery 用作属性选择器,并且必须通过为 jquery 使用不同类型的选择来转义或规避(如果 id 有 @,则不是 #id 987654336@ 内)。

标签: javascript jquery html validation input


【解决方案1】:

您需要转义 jquery 选择器字符。

$('#NS_IN\\[0\\]').blur(function() {
        alert("Called");
        CopyNStoMain();     
    });

【讨论】:

  • 我忽略了我自己的答案并赞成你的答案。完美。
  • 您也可以尝试将表单包装在&lt;div id="foo"&gt; 中,并使用$("#foo input") 作为选择器。有关更多可能的选择器,请参阅api.jquery.com/category/selectors
【解决方案2】:

您已经有了答案here...我不知道如何将您的问题标记为重复。

//get
bla = $('#txt_name').val();
//set
$('#txt_name').val('bla');

【讨论】:

  • 不完全是。我确实知道如何获取输入元素的值。看看我是如何包含typeof($('#NS_IN[0]').val()) 的检查的。我的问题是关于意外的输出和未定义的变量。
  • 哦,对不起...您要检查输入是字符串还是整数还是...?
  • 我正在尝试使用该值,但方括号搞乱了逻辑。
【解决方案3】:

在 jQuery 中,[] 以不同的方式工作,例如:

div[id^="player_"]

因此,解决方案之一是选择 ID 以某物开头的项目:

$("input[id^=NS_IN]").val();

【讨论】:

    【解决方案4】:

    当您使用不同的选择器时它会起作用,因为 jquery 使用 [] 作为属性选择器本身。所以使用例如(见小提琴:http://jsfiddle.net/rePQm/1/):

    $('input').click(function() { alert("clicked" + this.id); });

    选择所有输入元素并将点击处理程序添加到所有输入元素的元素选择器。有关更多可能的选择器,请参阅http://api.jquery.com/category/selectors/ 的 jquery 文档的选择器部分。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-10-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-05-07
      • 1970-01-01
      • 2015-10-04
      相关资源
      最近更新 更多