单击新添加的链接不会执行JavaScript函数
clicking on newly added links don't execute javascript function
在试验jquery时,我创建了这个html和javascript。
<body>
<div id="results">
<div class="mylinkdiv">
<a class="mylinkclass" href="#">8</a>
: This is supposed to be a toaster.
<br>
<a class="mylinkclass" href="#">14</a>
: with a toaster maybe.
<br>
<a class="mylinkclass" href="#">51</a>
: If we're really creative.
<br>
</div>
</div>
<button id="remove" type="button" > Remove</button>
<button id="add" type="button" > Add</button>
</body>
JavaScript有一个功能来弹出包含链接文本的消息。它还具有向div添加一些链接的功能。一个名为 remove 的函数,用于删除内部div 。
$(document).ready(function(){
$('.mylinkclass').click(function(){
getLinkText(this);
});
$('#remove').click(function(){
removeContents();
});
$('#add').click(function(){
addContents();
});
});
function getLinkText(that){
var txt = $(that).text();
var num = parseInt(txt);
alert('num='+num);
return false;
}
function addContents(){
$('#results').append('<a class="mylinkclass" href="#">70</a> new line1 <br>');
$('#results').append('<a class="mylinkclass" href="#">77</a> new line2<br>');
}
function removeContents(){
$('.mylinkdiv').remove();
}
当我单击原始html页面中的链接(即3个链接)时,会弹出警报框。
当我单击添加按钮时,它会向div添加两个新链接,但是,当我单击那些新添加的链接时,警报不会弹出!
我不明白为什么..有人可以告诉我吗?
如果您使用的是jQuery 1.7,请使用.on,如果您使用的是jQuery 1.6,请使用.delegate
jQuery('#results').on('click','.mylinkclass',function() {
getLinkText(this);
});
演示
另一种方法是克隆现有元素 Demo
var cloned = jQuery('.mylinkclass:last').clone(true);
jQuery('#results').append(cloned);
在第二种情况下,事件侦听器也会被复制,你不需要使用 .on 或 .delegate。
您需要一个委托事件处理程序,因为您的项是在 dom 加载后动态创建的。
$('#results').on('click', '.mylinkclass', function() {
getLinkText(this);
});
当你在第一次加载页面后添加指向 DOM 的链接时,这些链接不会绑定到 jQuery 事件。您应该使用:
$(document).on('click', '.mylinkclass', function() {
});
当我第一次遇到这个问题时,我正在使用"live()",但你不应该使用它,因为根据 jQuery 文档,它已被弃用。
你必须这样做:
$ ('. mylinkclass'). live ('click', function () {
alert ('OK')
});
相关文章:
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 在Safari执行javascript之前对其进行修改
- 如何在执行此特定onclick事件时执行JavaScript函数
- 如何在从浏览缓存加载页面时执行javascript
- 使用Rhino和ASE执行Javascript的区别
- 如何在加载完整页面后严格执行javascript代码
- 在动态加载的对话框中执行Javascript
- 在Sinatra中执行Javascript
- 通过AJAX加载页面并执行javascript和CSS
- 适用于多种浏览器的Selenium-需要能够执行javascript的webDriver
- 如何在seleniumwebdriver中执行javascript提示并等待接受输入
- 在window.open()生成的窗口中执行JavaScript
- AJAX成功回调-执行javascript时出现问题
- 通过指令在控制器中执行javascript函数
- 从React Native Android原生地执行JavaScript代码
- iframe未执行Javascript方法(PHP)
- 执行JavaScript代码,使用selenium webdriver或WatiN从控制台获取日志
- 通过web驱动程序异步执行Javascript
- 如何在长时间执行JavaScript期间显示微调器
- 点击困难时执行javascript函数