javascript - 无法获取动态创建元素的 id

标签 javascript jquery html

我正在制作一个网页,该网页将通过 ajax 动态生成大量输入。我想检索任何更改的输入的 id(最终是新值)。下面是我的网站的一个非常简单的示例。现在我正在使用委托(delegate)附加一个事件处理程序来检索输入的 id 和新值,但我无法获取我想要的值。我的实现不正确吗?我是 jquery 新手,所以任何帮助将不胜感激。谢谢。

<html>
  <head>
  </head>
  <body>
    <div class="container">

      <form id="test_form">
            <input type="submit">
      </form>

      <div id="inputs">
      </div>
    </div>

    <script src="../static/js/jquery-1.11.0.min.js"></script>
    <script src="../static/js/loader.min.js"></script>
    <script>


    $("#test_form").submit(function() {
        // this variable is just an example, the actual variable will be
        // returned via ajax and will have 1-20 inputs
        var inputs = {
            input1: "default1",
            input2: "default2"
        }

        for (var key in inputs) {
            var li = $("<li>")
            var input = $("<input>")
            input.attr({
                type: "text",
                value: inputs[key],
                id: "id_" + key
            })
            li.append(input)
            $("#inputs").append(li)
            input.onchange
        }

        return false; // stop the form from submitting
    });

    var onChangeFunction = function(){
       // does not show id of the input the text was changed on
       alert($(this).id)
       alert($(this).value)
    }

    $("#inputs").delegate("input", "change", onChangeFunction)


    </script>
  </body>
</html>

最佳答案

jQuery 对象没有 id 属性或 value 属性。您需要使用.attr()要获取元素的 DOM 属性,例如 id (或有时 .prop() ),您可以使用 .val()读取 value 属性:

alert($(this).attr("id"))
alert($(this).val())

关于javascript - 无法获取动态创建元素的 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24110386/

相关文章:

javascript - 使用 JQUERY 将包含数据集的 JSON 绑定(bind)到下拉列表

javascript - 使用浏览器导航器会导致 JShint 错误

javascript - flexslider - 两个 slider 在一起 - Directional Nav 有时只滑动一个 slider 。如何解决这个问题?

html - 在某些字符上显示 Vim omnicomplete 而不是 Ctrl-X Ctrl-O?

html - 垂直/水平图像在 DIV 内居中图像

javascript - 如果动态生成的 html 的 div 为空,则隐藏元素

javascript - 在删除数组项之前添加 css 动画

javascript - Javascript 表达式 'a = a || function() {...}' 是什么意思?

jquery - Chrome 使用动态内容折叠内联元素的宽度

javascript - jquery内容不显示在html表格中