单击新添加的链接don'；不执行javascript函数_Javascript_Jquery

单击新添加的链接don'；不执行javascript函数

javascript jquery

单击新添加的链接don'；不执行javascript函数,javascript,jquery,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> :

在试验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();      
}

$（文档）.ready（函数（）{
$（'.mylinkclass'）。单击（函数（）{
getLinkText（本）；
});
$（“#删除”）。单击（函数（）{
删除内容（）；
});
$（'#添加'）。单击（函数（）{
addContents（）；
});
});
函数getLinkText（该函数）{
var txt=$（that.text（）；
var num=parseInt（txt）；
警报（'num='+num）；
返回false；
}
函数addContents（）{
$（'#results'）。追加（'new line1
'）；
$（“#结果”）。追加（'new line2
'）；
}
函数removeContents（）{
$（'.mylinkdiv'）.remove（）；
}

当我点击原始html页面中的链接（即3个链接）时，会弹出警告框

当我单击add按钮时，它会向div添加两个新链接。但是，当我单击这些新添加的链接时，警报不会弹出
我不明白为什么..有人能告诉我吗？
您需要一个事件处理程序，因为您的项目是在dom加载后动态创建的

$('#results').on('click', '.mylinkclass', function() { getLinkText(this); });
您需要一个事件处理程序，因为项目是在dom加载后动态创建的

$('#results').on('click', '.mylinkclass', function() { getLinkText(this); });

如果使用jQuery 1.7，则使用.on；如果使用jQuery 1.6，则使用.delegate

jQuery('#results').on('click','.mylinkclass',function() { getLinkText(this); });

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

在第二种情况下，事件侦听器也将被复制，您不需要使用.on或.delegate。
如果您使用的是jQuery 1.7，则使用.on；如果您使用的是jQuery 1.6，则使用.delegate

jQuery('#results').on('click','.mylinkclass',function() { getLinkText(this); });

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

在第二种情况下，事件侦听器也将被复制，您不需要使用.on或.delegate。
当您在第一次加载页面后向DOM添加链接时，链接不会绑定到jQuery事件。你应使用：

$(document).on('click', '.mylinkclass', function() { });

当我第一次遇到这个问题时，我正在使用“live（）”，但您不应该使用它，因为jQuery文档不推荐使用它。
当您在第一次加载页面后向DOM添加链接时，链接不会绑定到jQuery事件。你应使用：

$(document).on('click', '.mylinkclass', function() { });

当我第一次遇到这个问题时，我正在使用“live（）”，但您不应该使用它，因为根据jQuery文档，它已被弃用。
您必须这样做：

$ ('. mylinkclass'). live ('click', function () { alert ('OK') });

你必须这样做：

$ ('. mylinkclass'). live ('click', function () { alert ('OK') });
技术上，这不是风格，这是风格。技术上，这不是风格，这是风格。