Question

我遇到了令人沮丧的问题。我想在动态添加的输入上添加一个点击事件，但我已经在这方面苦苦挣扎了一段时间。

要显示一些代码，这是我的初始视图

<div class="js-item-list"></div>

然后用户可以动态添加数据，然后填充此div，例如像这样（带有初始div）

<div class="js-item-list">
  <div class="js-service-list-item>
    <table>
      <tr>
       <td>Something</td>
       <td><input type="text" class="js-consumption"></td>
      </tr>
    </table>
  </div>
  <div class="js-service-list-item>
    <table>
      <tr>
       <td>Something</td>
       <td><input type="text" class="js-consumption"></td>
      </tr>
    </table>
  </div>
  ... and so on ...
</div>

我想在所有输入中添加带有jQuery的点击事件，以便当用户点击输入时，将选择该特定输入框的所有内容。但是我不知道怎么这样所有的建议都会受到高度赞赏，比如：）

Answer 1

您可以为新添加的或将来的元素使用委托方法

refrence

 $('.js-item-list').delegate('input', 'click', function(e) {
     //some code here
 })

或者对于jquery的更新版本＆gt; 1.7，您应该使用.on（）

从jQuery 1.7开始，.delegate（）已被.on（）方法取代

$('.js-item-list').on('input', 'click', function(e) {
         //some code here
     })

Answer 2

使用jQuery的事件委托函数可以解决您的问题，试试这个：

$(".js-item-list").on("click" , "input.js-consumption" , function(){
    var domInput = this ;
    var $input = $(this) ;
    var value =  $input.val();
    // to do
});

Answer 3

您可以使用Jquery .on函数，该函数适用于动态添加的html元素。

$(".js-item-list").on( "click", ".js-consumption" ,function() {
     alert( $( this ).val() );
});

.js-item-list 是动态变化的选择器类，只有内部元素才会发生变化。

Answer 4

我假设您有一些按钮，用户点击该按钮以添加另一个＆＃34; Something＆＃34;。我还假设您的JS代码$(".js-service-list-item").onclick(someAction)中有某处。

该初始JS代码仅适用于该类在运行时存在的元素。这意味着每次他们向列表添加元素时，您需要重新应用该onclick方法。

所以我要做的就是将$(".js-service-list-item").onclick(someAction)代码移到你添加这些service-list-items的按钮的onclick函数中。这样每次创建一个新元素时，你也会用它注册onclick事件

选择特定输入并向其添加事件

4 个答案: