javascript - 点击新添加的链接不执行javascript函数

标签 javascript jquery

在试验 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

另一种方法是克隆现有元素 Demo

var cloned = jQuery('.mylinkclass:last').clone(true);
jQuery('#results').append(cloned);

在第二种情况下,事件监听器也将被复制,您不需要使用 .on 或 .delegate。

关于javascript - 点击新添加的链接不执行javascript函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10759594/

相关文章:

javascript - 在 TypeScript 中从这个实例化?

javascript - JsDoc、ES6 和@param {Constructor}

javascript - 在 Javascript 中处理子窗口和孙窗口

javascript - 使用 jQuery 自动更改 HTML div 元素的宽度

javascript - 如何在一个 jquery ".css()"中为一段文本添加多个文本阴影

javascript - 定义对要以 JSON 格式存储的元素的引用,而不使用元素的类或 id

javascript - jsx 和 React 中的动态标签名称不传递 props

javascript - 正则表达式用逗号分隔,但不在方括号中且不在方括号中

javascript - 如何在页面中央放置一个div和frame

javascript - 砌体布局中的中心单列