Question

我在HTML代码中有这个部分：

<div id="Container"></div>
<input type="button" value="Add input" class="btn-primary" id="AddInput"/>

我有这个脚本在＆id; id = Container＆＃39;：

中添加输入

<script>
    $(document).ready(function () {
        var x = 0;
        //add inputs into container
        $("#AddInput").click(function () {
           $("#Container").append("<input id="myInput-${x}" data-x-degeri="${x}"/>");
           x++;
        });
        //show the value of x in this clicked x
        $(`[id^="myInput-"]`).on("change", function (e){
             var z = $(this).attr("data-x-degeri");
             alert(z);
        });
    });
</script>

此脚本也应该向我显示我单击的输入的x值。但事实并非如此。它在我写作时正在工作

<input id="myInput-${x}" data-x-degeri="${x}"/>

直接在我的HTML中。

＆＃13;

 $(document).ready(function () {
            var x = 0;
            //add inputs into container
            $("#AddInput").click(function () {
               $("#Container").append(`<input id="myInput-${x}" data-x-degeri="${x}"/>`);
               x++;
            });
            //show the value of x in this clicked x
            $('[id^="myInput-"]').on("change", function (e){
                 var z = $(this).attr("data-x-degeri");
                 alert(z);
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container"></div>
    <input type="button" value="Add input" class="btn-primary" id="AddInput"/>

＆＃13;

Answer 1

您需要使用单引号id包装data-x-degeri和'值。

$("#Container").append("<input id="myInput-${x}" data-x-degeri="${x}"/>");
                                  ^                            ^

此外，使用事件委派将onchange事件绑定到新元素。

$(document).on("change", `[id^="myInput-"]`, function (e){...}

$(document).ready(function() {
  var x = 0;
  //add inputs into container
  $("#AddInput").click(function() {
    $("#Container").append("<input id='myInput-${x}' data-x-degeri='${x}'/>");
    x++;
  });
  //show the value of x in this clicked x
  $(document).on("change", `[id^="myInput-"]`, function(e) {
    var z = $(this).attr("data-x-degeri");
    alert(z);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container"></div>
<input type="button" value="Add input" class="btn-primary" id="AddInput" />

通过javascript获取输入的id

1 个答案: