Question

我有一个动态生成div的jquery代码

问题是a标签的onclick函数没有调用所需的函数

这是代码

$("#new").append('
    <ul class="#...#">
        <li>
            <a href="./d.html?n1='+item[0]+'&n2='+item[2]+'&n3='+item[3]+'">
                <input type="hidden" value='+item[0]+'>
                    <img style="height: 64px; width: 64px;" class="#...#"
                        src="image.png" width="40" height="40" />
                    <span class="#...#">
                        <b>'+item[0]+'</b>
                        '+item[1]+'......
                    </span>
            </a>
            <br />
            <div>
                <a onClick="insert();" href="#">
                    <i class="icon1"></i>
                </a>
                <a href="2.php?q='+q+'&n='+item[0]+'" id="icon2" name="icon2">
                    <i class="icon2"></i>
                </a>
            </div>
        </li>
    </ul>
');

我使用上面的代码作为ajax成功函数

标记未调用 insert（）函数我搜索了错误但找不到

做错了什么？提前谢谢

Answer 1

使用JavaScript事件委派来分离问题：

$(function() {
    $(document.body).on('click', 'ul.someClass div a', function() {
        // insert() method logic goes here
    });
});

第二个参数指定事件目标。此事件绑定到文档的正文，因此它始终存在。可以在稍后的某个时间点为每个AJAX生成目标DOM对象，或者从文档中删除目标DOM对象。当用户实际点击某些内容时，会发生实际的目标检查。

在代码中向<div>或<a>添加类属性可能有助于提高可读性。 E.g：

<div class="buttons">
    <a class="btn-insert" onClick="insert();" href="#">
        <i class="icon1"></i>
    </a>
    <a href="2.php?q='+q+'&n='+item[0]+'" id="icon2" name="icon2">
        <i class="icon2"></i>
    </a>
</div>

然后可以将jQuery on()方法的目标属性简化为'.btn-insert'

Answer 2

当您使用动态内容时，我建议您使用DOM事件委派。 ideea是在动态添加内容的父级上添加侦听器

这解释了如何操作以及如何工作

http://davidwalsh.name/event-delegate

Answer 3

将自定义类（例如“catchClick”）添加到捕获click事件所需的元素中。

var linkToAdd = '<a class="catchClick" href="#">My link</a>';
var $linkToAdd = $(linkToAdd);
$('#new').append($linkToAdd);

然后，以下代码将为该元素的点击设置处理程序。

它的工作原理是因为click事件从dom层次结构冒泡到文档元素。因此，您可以将侦听器附加到文档元素。

$(document).on('click', '.catchClick', function(e) {
    // do your stuff here
    // you probably need to get a jquery reference to the element that was clicked:
    var $this = $(this);
    // you probably want to stop the event's default actions so we'll add this:
    e.stopPropagation();
    e.preventDefault();
});

Answer 4

将新的可点击项添加到文档后设置点击事件处理程序，然后在每次将新的可点击项添加到文档后。

onClick在动态生成的div中不起作用

4 个答案: