Question

我的输入表单存在问题，应该动态增长。

这是我的HTML代码：

            <div id="div_pos">
                <p>
                    <input type=text name="pos_count1" style="width:30px">
                    <input type=text name="pos_name1" style="width:250px">
                    <input type=text class="pos" id="pos1" name="pos_value1" style="width:50px">
                </p>
            </div>

   <script type="text/javascript">
      var counter = 1;
      $('.pos').keypress(function(event){

      var keycode = (event.keyCode ? event.keyCode : event.which);
      if(keycode == '13'){

        counter++;

        var newTextBoxDiv = $(document.createElement('p'));

        newTextBoxDiv.after().html('<input type="text" name="pos_count' + counter + '" style="width:30px"> ' + 
        '<input type=text name="pos_name' + counter + '" style="width:250px"> ' + 
        '<input type=text class="pos" id="pos'+ counter + '" name="pos_value' + counter + '" style="width:50px">');

        newTextBoxDiv.appendTo("#div_pos");
      }
   event.stopPropagation();
 });

问题是只有在＆＃34; Enter-Key＆＃34;在第一个输入（id：pos1）中命中，而不是在pos类的创建输入字段中。我尝试用以下方法解决问题：

 $('.pos').keypress(function(event){

而不是

 $('#pos1').keypress(function(event){

但这不起作用。任何想法如何解决问题？ :) 抱歉更糟糕的标题......不知道如何准确描述问题。

Answer 1

由于您的input元素已动态添加到DOM中，因此这些元素无法使用所有事件，您需要在此处使用 event delegation ：

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是否存在，或将来是否存在。

$('#div_pos').on('keypress','.pos',function(event) {
     // Your code here
});

基本上，这种技术将帮助您将任何类型的事件（在您的情况下为keypress）附加到这些新生成的元素。

Answer 2

您需要事件委派。事件委托允许您将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有子项触发，无论这些子项现在是存在还是将来添加。使用.on()：

$('#div_pos').on('keypress','.pos',function() {

});

注意：您需要将处理程序绑定的元素指定为尽可能接近目标元素，以提高性能。在您的情况下，它是#div_pos，而不是body或document。

Answer 3

您需要使用：

$('#div_pos').on('keypress', '.pos', function(event)...

而不是

$('.pos').keypress(function(event)...

或者，您可以在追加元素后调用$（'。pos'）。keypress（）。从API：事件处理程序仅绑定到当前选定的元素;在您的代码调用.on（）时，它们必须存在于页面上。

https://api.jquery.com/on/

jquery - 动态创建的输入表单不受jquery函数的影响

3 个答案: