Question

最近我正在开发一个函数，我需要通过ajax为动态生成的HTML添加一个函数。代码如下所示：

$.ajax(
    'success': function(data){
        //do sth
        a.html(res);
        $(document).on('hover',sth in res,function(){
             console.log(1)
             $(this).toggleClass('classA').toggleClass('classB');
        })
    }
)

由于console.log()无法打印任何内容，因此似乎无法正常工作。绑定过程中是否有任何问题？我改变了鼠标悬停点击，鼠标等，似乎没有一个工作。 ajax调用中的其他函数工作正常。

Answer 1

当动态添加html时，Event Delegation很方便，在您的情况下，您可以附加事件监听器，如 -

$( document ).on( "click", "sth in res", function( event ) { //Give proper selector in place of sth in res
    console.log(1)
    $(this).toggleClass('classA').toggleClass('classB');
});

此外，您可能希望将侦听器代码放在ajax success委托之外，而不是$( document ).ready(function() {});方法。

请注意sth in res班级名称将引用三个不同的tag名称，而不是一个班级。如果你想同时选择一个包含所有三个类的元素，那么选择器将是.sth.in.res -

$( document ).on( "click", ".sth.in.res", function( event ) { //Give proper selector in place of sth in res
    console.log(1)
    $(this).toggleClass('classA').toggleClass('classB');
});

Answer 2

活动代表团将为您处理此事。不适合您的非委托方法是（这是您不想要的）：

sin

当动态地向DOM添加新元素时，您可以使用以下命令实现事件委派：

pi

以下是一些帮助您开始学习更多内容的链接：

https://learn.jquery.com/events/event-delegation/

jquery Event Delegation

如何在ajax调用中返回的动态html中绑定函数

2 个答案: