Question

请帮助我。我创建了一个运行时拼写检查系统。我面临的问题是，当系统返回正确的拼写时，它会显示超链接一词。如果用户单击该超链接，则应使用建议的工作覆盖该单词。不幸的是，jQuery创建的超链接没有触发我创建了这个虚拟项目，因为实际代码非常冗长。 JSfiddle链接是：http://jsfiddle.net/pk2mk863/1/

<html>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<body>

<a href="#" id="testing">Testing</a>
<div id="testing1"></div>

<script>
    $(document).ready(function() {
        $('#testing').click(function () {
            $('#testing1').html('<a href="#" id="testing22">click me again</a>');
        });

        $('#testing22').click(function() {
            alert("i rock");
        });
    }); 
</script>
</body>
</html>

Answer 1

因为您在DOM中动态添加HTML，所以使用事件委派，如下所示：

$(document).on('click','#testing22',function(){
   alert("i rock");
});

现在您的完整jquery代码如下所示：

<script>
    $(document).ready(function() {
        $('#testing').click(function () {
            $('#testing1').html('<a href="#" id="testing22">click me again</a>');
        });

        $(document).on('click', '#testing22', function() {
            alert("i rock");
        });
    }); 
</script>

Answer 2

改为使用委托事件处理程序：

e.g。

<script>
    $(document).ready(function() {
        $('#testing').click(function () {
            $('#testing1').html('<a href="#" id="testing22">click me again</a>');
        });

        $(document).on('click', '#testing22', function() {
            alert("i rock");
        });
    }); 
</script>

这可以通过监听一个事件（在这种情况下是点击）冒泡到一个不变的祖先（在这种情况下是document，如果没有别的方便）。然后应用jQuery选择器，然后将该函数应用于导致事件的任何匹配元素。

此技术允许您将事件连接到尚不存在的元素。

jQuery：由其他事件创建的事件

2 个答案: