Javascript 如何在每次JSON成功时添加JS事件

我的

codeigniter

视图包含

AJAX

数据，如下所示

DIV

文章数据

DIVs的内容列表（工作正常）现在我想将每个DIV作为一个按钮，并在其中放置按钮单击事件。我把下面的代码放在这里

$(".target").click(function () {

});

JS

$（窗口）.load（函数（）{
$.ajax({
url:“+”主/数据“，
数据类型：“JSON”，
类型：“POST”，
成功：函数（retdata）{
$。每个（数据、函数（i）{
var content=''+retdata[i].content+''；
$（“.article data”）.append（content）；//第23行
});
}
});
});

只需使用。即使文档准备就绪，它也会将事件绑定到添加到DOM中的项

$(document).on('click', ".target", function () {

});

就用吧。即使文档准备就绪，它也会将事件绑定到添加到DOM中的项

$(document).on('click', ".target", function () {

});

在动态生成元素时，应该使用委托事件方法。您不需要在
success
块中绑定事件

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将单击事件绑定到动态创建的元素，并避免频繁附加和删除事件处理程序

一般语法

您应该使用最接近的静态容器来代替
文档

范例


$（函数（）{
$（“.article data”）。在（'click'，.target'，函数（）上{
//你的代码
});
})
$（窗口）。加载（函数（）{
$.ajax({
url:“+”主/数据“，
数据类型：“JSON”，
类型：“POST”，
成功：函数（retdata）{
$。每个（数据、函数（i）{
var content=''+retdata[i].content+''；
$（“.article data”）.append（content）；//第23行
});
}
});
});

动态生成元素时，应使用委托事件方法。您不需要在
success
块中绑定事件

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将单击事件绑定到动态创建的元素，并避免频繁附加和删除事件处理程序

一般语法

您应该使用最接近的静态容器来代替
文档

范例


$（函数（）{
$（“.article data”）。在（'click'，.target'，函数（）上{
//你的代码
});
})
$（窗口）。加载（函数（）{
$.ajax({
url:“+”主/数据“，
数据类型：“JSON”，
类型：“POST”，
成功：函数（retdata）{
$。每个（数据、函数（i）{
var content=''+retdata[i].content+''；
$（“.article data”）.append（content）；//第23行
});
}
});
});

单击事件正在运行。完美答案@Satpal它仅用于单击事件？我用它来做鼠标悬停，但不起作用<代码>$（“.article data”）.on（'hover'，“.target”，function（）{}
@geethelagedara，
.hover（）
是
$（选择器）.mouseenter（handlerIn.mouseleave（handlerOut）的缩写
，你应该使用
mouseenter
和
mouseleave
事件，因为没有任何事件，因为
hover
点击事件正在工作。答案完美。@Satpal它只用于点击事件？我用于鼠标悬停，而鼠标悬停不工作。
$（.article data”）.on（'hover'，.target function（）{code>@geethelagedara，
.hover（）
是
$（选择器）.mouseenter（handlerIn）.mouseleave（handlerOut）；
的缩写，您应该使用
mouseenter
和
mouseleave
事件，因为没有
悬停
$(function() {
  $(".article-data").on('click', ".target", function() {
    //Your code
  });
})