事件侦听器不适用于附加项目答案

【问题标题】：event listner not working for appended items事件侦听器不适用于附加项目
【发布时间】：2015-01-29 14:30:48
【问题描述】：

嘿，我在单击时将表单附加到页面上，表单有一些文本框，我需要像在按键上一样添加事件列表器，但函数 dosent 工作不知道问题出在哪里，该函数在任何地方都能正常工作，但不适用于这个表格是代码。

追加表格

 function activityCHART(thisobj){
 var theidis=$(thisobj).attr("id");
  $("#FULL_FADE").fadeIn();
      $.ajax({
  type: 'post',
    url: 'newpage.php',
  data:{'actde':theidis},
    success: function(dataa){
   $("#the_APPEDEDr5").empty().append(dataa);
  }});}

newpage 这个文本框存在和一些更多的文本区域

<input type="text" name="deptname" placeholder="department name" id="detp_names09o" class="TEXTNAME_o909ioi"/>

添加此事件监听器

 $('#detp_names09o').keypress(function (e) {
alert('ok');});

这些是一些脚本链接

 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

我认为有一些脚本链接问题

当我这样做时会发出警报 onkeyup="thisisfun();"函数 thisisfun(){ alert('ok'); }

【问题讨论】：

删除第一个 jquery 链接，只需转到
什么都没有发生......当我这样做时会发出警报 onkeyup="thisisfun();"函数 thisisfun(){ alert('ok'); }

标签： javascript jquery

【解决方案1】：

您应该使用 live()、delegate() 或 on() 将事件侦听器附加到动态添加的 DOM 元素。 bind() 和 keypress() 不适用于动态添加到 DOM 的元素[参见this]

$('#detp_names09o').live("keypress",function (e) {
      //do some stuff
});

.on() 主要是可以模仿 .live() 或 .delegate() 的语法糖，具体取决于您如何称呼它。

$('#detp_names09o').on("keypress",function (e) {
      //do some stuff
 });

另外，您指定了两个不同版本的 jQuery。尽管 CDN 确实比本地引用的库有一些优势，但它们有时可能会破坏您的代码。如果这就是您引用本地 jQuery 文件（以及 CDN 版本）的原因，您可以考虑查看 CDN fallbacks。无论哪种情况，您都应该注意您使用的版本。

干杯！

【讨论】：

【解决方案2】：

要将事件附加到动态添加的元素，

尝试使用'bind'绑定事件

$('#detp_names09o').bind("keypress",function (e) {
      alert('ok');
});

或使用“开”

$('#detp_names09o').on("keypress",function (e) {
          alert('ok');
 });

另外，您的页面中不需要两个版本的 jquery，还要确保此 id 不重复

【讨论】：

你的页面不需要两个版本的 jquery，还要确保这个 id 不重复，如果它不工作，尝试创建一个小提琴
当我这样做时会发出警报 onkeyup="thisisfun();"函数 thisisfun(){ alert('ok'); }

【解决方案3】：

在元素内部使用 onkeyup,.. 属性并像这样调用函数

<input type="text" name="deptname" placeholder="department name" id="detp_names09o" class="TEXTNAME_o909ioi" onkeyup="functionName()"/>

在javascript中

function functionName(){
  //your code
}

【讨论】：

我知道我可以这样做，但在这里我需要添加事件列表器有很多..
在这种情况下 jquery 1.8 或 1.7 支持 $('#elementid').live("click",function(){});
避免在 html 上添加内联脚本。

【解决方案4】：

首先你应该决定你想使用什么，keyup 还是 keypress？例如，如果您想使用 keyup 并且您使用的 jquery 版本大于 1.7，则使用

$(document).ready(function () {
    $('#element').on("keyup",function () {
              alert('result ok');
    });
});

否则你可以使用

 $(document).ready(function () {
    $('#element').live('keyup', function() {
      alert('result ok');
    });
 });

确保您正在调用工作脚本（检查您的脚本链接），尽量不要使元素的重复 ID 而是使用类，并避免使用 javascript 的内联使用。快乐编码！

【讨论】：